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:-
- Hiyo ndio package
- Main method
- Function inayoelekeza ku run app
- Widget ya materialApp
- Property ya home na widget ya scaffold
- Widget ya appBar
- Property ya tittle
- Property ya body
- Value za text widget kwenye appBar widget
- Value za text widget kwenye body property
Bonyeza batani ku ku run app utapata matokeo haya:
Code hizo hapo juu pia tunaweza kuziandika katika mitino tofauti tofauti. Hapa chini ni mitido tofauti ya uandishi, ambayo tutakwend akujifunza kidogo kidogo. Code hizo hapo chini utakuta ni vitu vipya ila usijali nitavieleza vyema kidogo kidogo katika masomo yanayofuata. Hapa unachotakiwa kujuwa ni iyo mitindo tu na kuanza kujenga ufahamu.
- Kwa kutumia arrow function:
Code hizo hapo juu tunaweza kuzifupisha kwa kutumia arrow function
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'))));
Kama unakumbuka kwenye mafunzo ya Dart hapo nimetumia arrow function.
- Kwa kutumia OOP
Pia code hizo tunaweza kuziandika kwa kutumia mfumo wa OOP yaani object oriented programming. Ni vyema uwe unajuwa OOP kwani ndio mtindo ambao tutakwend akuutumia sana kwenye mafunzo hay. Rejea kwenye mafunzo yetu ya Dart.
Kwanza tutatengeneza class ya project yetu. Kwa mfano tutaiita Tehama. Sas atuta extend na StatelessWidget. Widget zipo katika makundi makuu mawili kuna stateless widget hizi ni zile ambazo mauthui yake hayabadilikibadiliki mfano text.. Na zipo stateful widget hizi i zile ambazo maudhui zake hubadilikabadilika mfano batani.
Baada ya hapo tutaweka method ambayo itatuwezesha kutengeneza class ya widget. Method inayotumika hapa ni build.Widget build(BuildContext context) {} utaona hapo tumeanza na widget hiyo ni return type ya hiyo method ya build, ina maana kuwa method yetuinakwenda ku return widget. Nndani yake kuna parameter BuildContext contect kwa ajili ya kutoa melekezo kuhusu wai hizo widget zinakwenda kukaa. Mwisho utaona kuwa build method ita returm MateriaApp.
import 'package:flutter/material.dart';
class Tehama extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Bongoclass'),
),
body: const Center(
child: Text('Mafunzo ya Flutter kutoka Bongoclass'),
),
),
);
}
}
void main() {
runApp(Tehama());
}
Kwa kutumia lambda function
Mfano huo hapo juu pia tunaweza kuuandika kwa kutumia lambda functions.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Bongoclass'),
),
body: const Center(
child: Text('Mafunzo ya Flutter kutoka Bongoclass'),
),
),
);
}
Mambo ya kuzingatia:
Kabla sijafunga somo kwanza zingatia kkuwa:
- Unapoandika class utaanza na herufi kubwa
- Unapoandikwa property utaanza na herufi ndgo
- Unapoandika widget utaanza na herufi kubwa
- build() method ni lazima unapotengeneza class ya widget
Mwisho:
Tukutane somo linalofuata ambapo tutakwenda kujifunza kuhusu widget, aina zake na sheria za kuandika widget.
