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?
Rajabu
Sponsored links
Flutter somo la 5: widget ni nini na zinafanya nini kwenye flutter
FLUTTER somo la 20: Jinsi ya ku sign App ya android kwenye flutter
FLUTTER somo la 2: Jinsi ya kutengeneza App ya flutter
Flutter somo la 6: Scaffold widget, kazi zake na property zake
FLUTTER somo la 18: Jinsi yakubadili App name kwenye flutter
Flutter: Somo la 3: Mambo muhimu kuhusu App ya flutter
FLUTTER somo la 19: jinsi ya kubadili app id ama bundle identifier na configuration nyingine
Flutter: somo la 4: Jinsi ya kuandika code za App ya flutter, hatuwa kwa hatuwa
Flutter somo la 15: Jinsi ya kuweka icon kwenye App ya flutter
Flutter somo la 14: Jinsi ya kuweka picha
Flutter somo la 1: Nini flutter na nini hasa inafanya
Flutter somo la 9: Jinsi ya kutumia widget ya Row
Nicheki WhatsApp kwa maswali
Ndio Hapana Save post 
Tarehe 2024-05-10 14:53:23 Topic: Flutter
Main: Masomo
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 480
👉1 Sira ya Mtume Muhammad (s.a.w)
👉2 Simulizi za Hadithi Audio
👉3 Kitabu cha Afya
👉4 kitabu cha Simulizi
👉5 Kitau cha Fiqh
👉6 Madrasa kiganjani
Post zifazofanana:-
Katika somo hili uatwkeda kujifunza zaidi kuhusu widget, maana yake, aia zake na kazi zake kwneye flutter. Soma Zaidi...
Somo hili litakufundisha hatuwa kwa hatuwa jinsi ya ku sign app ya android kwenye flutter Soma Zaidi...
Katika somo hili utajifunza jinsi ya kutengeneza App yako ya kwanza ya Flutter hatuwa kwa hatuwa. Soma Zaidi...
Katika somo hili utakwend akujifunza kuhusu scaffold widget. Hapa tutakwend kuona properties zake na baadhi ya mifano. Soma Zaidi...
Katika somo hili utakwenda kujifunzajinsi ya kubadilisha, jinala App yaani App name. Soma Zaidi...
Katika somo hili tutakwend akuyaona baadhi ya maeneo muhimu ya kuanzia kuyajuwa kwa ajili ya course ya flutter kwneye android studio. Soma Zaidi...
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...
Katika somo hili utakwenda kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework. Soma Zaidi...
Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter. Soma Zaidi...
Katika somo hili utakwenda kujifunza kuhusu widget ya Image ambayo hutumika kuonyesha picha kwenye App. Soma Zaidi...
Katika somo hili utajifunza historia fupi ya flutter, kazi zake, nini hasa inafanya. pia utajifunza jinsi ya ku install flutter Soma Zaidi...
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...