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 ">...
Download App Yetu
Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua.
Download Now
Umeionaje Makala hii.. ?
👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 Kitabu cha Afya 👉3 Madrasa kiganjani 👉4 kitabu cha Simulizi 👉5 Simulizi za Hadithi Audio 👉6 Kitau cha Fiqh
Post zinazofanana:
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 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 12: widget ya padding
Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako.
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 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 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 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 8: Jinsi ya kutumia widget ya column
Katika somo hili utakweda kujifunza kuhsu widget ya column. Widget hii ni moja katika widget zilizo muhimu sana kuzifaham.
Soma Zaidi...