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.

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:-



Je! umeipenda hii post?
Ndio            Hapana            Save post

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2024-02-18 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 149


Download our Apps
👉1 Madrasa kiganjani     👉2 Kitau cha Fiqh     👉3 Kitabu cha Afya     👉4 kitabu cha Simulizi    

Post zifazofanana:-

Flutter somo la 12: widget ya padding
Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. 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 3: Mambo muhimu kuhusu App ya flutter
Katika somo hili tutakwend akuyaona baadhi ya maeneo muhimu ya kuanzia kuyajuwa kwa ajili ya course ya flutter kwneye android studio. Soma Zaidi...

Flutter somo la 11: Matumizi ya text widget
Katika Flutter, Text Widget ni kipengele kinachotumiwa kuonyesha maandishi kwenye programu. Kwa kawaida, hutumiwa kama sehemu ya muundo wa UI ya programu za Flutter. Soma Zaidi...

Flutter somo la 13: widget ya batani
Katika somo hili uatakwenda kujifunz ajinsi ya kutumia batani na kuweka maumbo mbalimbali ya batani. Soma Zaidi...

FLUTTER somo la 2: Jinsi ya kutengeneza App ya flutter
Katika somo hili utajifunza jinsi ya kutengeneza App yako ya kwanza ya Flutter hatuwa kwa hatuwa. 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 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 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...

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 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 15: Jinsi ya kuweka icon kwenye App ya flutter
Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter. Soma Zaidi...