Flutter somo la 16: Jinsi ya kuweka drawer menu
Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter.
Menu ya drawer hii ni ile ambayo ukibofya ku kama ukurasa unafunguka na unakuwa na menu nyingine. Menu hii inawekwa kwa kutumia widget ya drawer: Drawer()
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Menu Example'),
),
body: const Center(
child: Text('Home Page'),
),
drawer: Drawer(
),
);
}
}
Baadhi ya properties za drawer:
-
Child hii inakuwa na widget kama listview, column, drawer header na title
-
Background ambayo inaweza kuwa na widget kama color
-
Elevation hii inaonyesha kivuli shini ya dawer
-
Shapeborder hii huonyesha umbo la drawer.
-
DrawerHeader hii huonyesha kichwa cha hiyo drawer
-
Listview hii husaidia kupangilia menu kwenye drawer katika orodtha. Ndani yake menu unaweza kuziweka kwenye widget ya listtitle
Mfano wa widget kwenye drawer:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Drawer Example'),
),
drawer: Drawer(
backgroundColor: Colors.blue[100],
elevation: 16.0,
child: ListView(
padding: EdgeInsets.zero,
children: const <Widget>[
DrawerHeader(
&nbs...
Umeionaje Makala hii.. ?
Share On:
👉1 Dua za Mitume na Manabii 👉2 Kitabu cha Afya 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 Tafasiri ya Riyadh Swalihina 👉5 Madrasa kiganjani 👉6 kitabu cha Simulizi
Post zinazofanana:
Flutter somo la 10: Jinsi ya kutumia widget ya container
Katika somo hili utakwend akujifunza kuhusu widget ya container pia tutajifunza jinsi widget hii inavyoweza kutumika na widget nyingine.
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 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 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 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 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...