Katika somo hili utakwenda kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework.
Somo hili litajikita jinsi ya kukupa utangulizi juu ya sheria za kuandika code za Dart kwneye flutter. Somo hili litakufunza baadhi ya misingi ya flutter. Kabla ya hapo kwanza kujifunze jinsi ya kuandika code za project yetu. Tafadhali rejea kwenye masomo yetu ya Dart kama huna uzoefu, kwa sababu hapa tutatumia language ya Dart.
Hatuwa ya kwanza:
Kwanza kabisa futa kila kitu kwenye ukurasa wa main.dart ukurasa wa code ambao unaonekana hapo kwene android studio. Baada ya kufuta tutaanza kuandika code zetu wenyewe.
Hatuwa ya Pili:
Anza kwa ku import package ya flutter materia. Package hii inatusaidia sisi ili tuweze kutumia materia design kwa ajili ya kutengeneza muonekano wa app yetu. Tutaweza ku import kwa kutumia code hizi:-
import 'package:flutter/material.dart';
Hatuwa ya tatu:
Sasa tunakwenda kuanza na kuandiak main function ya app yetu. Kama unakumbuka kwenye mafunzo ya Dart kuwa project ya Dart inaanzia na main(){} function. Basi hata hapa ttaanza nayo hivyo hivyo.
void main() {
}
Ndani ya function yetu hapo ndipo sasa tunakwenda kuweka code zetu.
Hatuwa ya nne: Sasa tutaansika code kwa ajili ya ku initiate launching yaani kwa ajili ya kuanzisha app iweze ku run. Kwenye flutter tutatumia function ya runApp() ndani yake kutakuwa na code ambazo zitafanya kazi wakati app imerun.
Hatuwa ya tano: sasa ni muda wa kutumia materia design kwa ajili ya kuifanya app yetu ipate muonekano. Mfano tunaweza kuweka batani. Text, app bar na kadhalika. Ili kufanya hivyo tutatumia widge ya MaterialApp(). Nini maana ya widge, hii tutajifunza hapo chini kidogo.
Sasa kawaida kwenye flutter widge inaweza kuwa na properties zake. Na property inaweza kubeba widge nani yake. Sasa ndani ya MateriaApp widget tutaweka propert ya home:. Kawaida widget zinakuwa na property zake. Na kila propert inakuwa na value zake. Sasa hapo tutaumia widget nyngine kana value ya property home ambayo ni scaffold widget.home: Scaffold() ndani ya scaffold widget tutaweka property appBar: iwe kama value ya scaffold widget. Pia propert ii tutaipa wiget ya AppBar().
Widget ni nini?
Widget ni user interface element zote, yaani kila ambacho mtumiaji atakiona kwenye app basi ni widget. Kuanzia batani, text, na vinginevyo hizo zote ni widget. Widget inawez akubeba functions, mbalimbali. Tutajifunza zaidi kuhusu widget katika somo linalofuata.
Scaffold widget hutumika katika kutengeneza muonekano (basic visual structure). Home property hutumika kwa ajili ya kutengeneza home page ya application yako. Hiyo ndio itaeleza widget gani zitafanya kazi kwenye home page. appBar hii hutumika kwenye kutengeneza app bar.
Hatuwa ya sita:
Sasa tunakwend akuweka app bar kwenye app yetu. Kufanya hivi tutatumia property ya appBar ambayo value zake ni widget ya text() kwa ajili ya kuandika jina la app bar.
title: const Text('Bongoclass'),
Hatuwa ya saba:
Sasa app yetu tayari ina app bar, kwahiyo sasa tunahitaji kuweka body kwebye app yetu. Kwenye body tunaweka maudhui za app. Kumbuka bado tupo ndani ya scaffold widget. Hivyo basi tutatengeneza propery nyingine ambayo ni body. Tutatumia widget ya Text ili kuweza kuandika text zetu.
body: const Text('Mafunzo ya flutter kutoka Bongoclass'),
Code zote zipo hivi:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Bongoclass'),
),
body: const Text('Mafunzo ya Flutter kutoka Bongoclass'),
),
),
);
}
Wacha tuone hizi code:
Hapa chini nimeleta picha y code hizo tuone jinsi maelezo nilotoa hapo juu ynanavyoweza kuonekana. Nitatumia namba kuelekeza hizo namba za kwenye pichha:-
Kama unahitaji kuuliza maswali Bofya hapa
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu
Tarehe 2024-05-10 14:53:23 Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 372
Sponsored links
👉1 Kitau cha Fiqh
👉2 kitabu cha Simulizi
👉3 Kitabu cha Afya
👉4 Madrasa kiganjani
Flutter somo la 14: Jinsi ya kuweka picha
Katika somo hili utakwenda kujifunza kuhusu widget ya Image ambayo hutumika kuonyesha picha kwenye App. Soma Zaidi...
Flutter somo la 9: Jinsi ya kutumia widget ya Row
Katika somo hili utakwenda kujifunza kuhusu row widget. Hii ni widget ambayo ina utofauti na column widget kwa kuwa hii yenyewe inapangilia maudhui kwa safu za mlalo, tofauti na iliyopita inapangilia kwa safu za wima. Soma Zaidi...
FLUTTER somo la 19: jinsi ya kubadili app id ama bundle identifier na configuration nyingine
Katika somo hili utajifunza jisni ya kubadili package name ama app id kwenye Android app na Bundle Identifier kwenye iOS app na taarifa nyinginezo. Soma Zaidi...
Flutter somo la 1: Nini flutter na nini hasa inafanya
Katika somo hili utajifunza historia fupi ya flutter, kazi zake, nini hasa inafanya. pia utajifunza jinsi ya ku install flutter Soma Zaidi...
Flutter somo la 17: Jinsi ya kubadili app icon
Katika somo hili utakwenda kujifunza jinsi ya kubadili app icon kwenye app ya Android na iphone kwenye flutter. Soma Zaidi...
Flutter somo la 16: Jinsi ya kuweka drawer menu
Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter. Soma Zaidi...
Flutter somo la 7: jinsi ya kutumia Widget ya AppBar
Katika somo hili utakwend akujifunza kuhusu widget ya AppBar. Hata tutaona inavyofanya kazi na baadhi ya property zake. Soma Zaidi...
FLUTTER somo la 18: Jinsi yakubadili App name kwenye flutter
Katika somo hili utakwenda kujifunzajinsi ya kubadilisha, jinala App yaani App name. Soma Zaidi...
Flutter somo la 6: Scaffold widget, kazi zake na property zake
Katika somo hili utakwend akujifunza kuhusu scaffold widget. Hapa tutakwend kuona properties zake na baadhi ya mifano. Soma Zaidi...
Flutter: somo la 4: Jinsi ya kuandika code za App ya flutter, hatuwa kwa hatuwa
Katika somo hili utakwenda kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework. Soma Zaidi...
FLUTTER somo la 21: Jinsi ya kutengeneza faili la apka na faili la aab
Katika somo hili utakwend akujifunza jinsi ya kutengeneza faili la apk kwa ajili ya ku share app yako, na faili la aab kwa ajili ya ku publih app yako. Soma Zaidi...
Flutter somo la 5: widget ni nini na zinafanya nini kwenye flutter
Katika somo hili uatwkeda kujifunza zaidi kuhusu widget, maana yake, aia zake na kazi zake kwneye flutter. Soma Zaidi...