FlutterFlutter · Chapterبەش 6 · Lectureوانە 6.4

Drawers, Bottom Bars and Sheetsلیستە لاتەنیشتەکان، شریتەکانی خوارەوە و پەڕەی خوارەوە

The rest of the Scaffold: where the floating action button can sit, drawers and end drawers (and Material 3's NavigationDrawer), working bottom navigation bars with state (and NavigationBar), footer buttons, the page colour, bottom sheets and what happens when the keyboard opens.

بەشەکانی تری Scaffold: لە کوێ دادەنرێت، drawer و endDrawer (و NavigationDrawerـی ⁦Material 3⁩)، کارپێکراو بە (و NavigationBar)، دوگمەکانی خوارەوە، ڕەنگی پەڕە، و ئەوەی کاتی کرانەوەی ڕوو دەدات.

25 min read23 خولەک خوێندنەوە · 17 stepsهەنگاو

What you will learnچی فێر دەبیت

Place a floating action button with floatingActionButtonLocation and explain float, docked, start and end.
Build a drawer and an end drawer with a header and items that close the drawer, and know NavigationDrawer.
Make a bottom navigation bar switch pages with state and setState, with BottomNavigationBar or NavigationBar.
Use persistentFooterButtons, backgroundColor, bottomSheet, showModalBottomSheet and resizeToAvoidBottomInset correctly.

بە floatingActionButtonLocation دابنێیت و float، docked، start و end ڕوون بکەیتەوە.
drawer و endDrawer بە سەردێڕ و بڕگەی داخەرەوە دروست بکەیت و NavigationDrawer بناسیت.
بە و setState پەڕەکان بگۆڕێت، بە BottomNavigationBar یان NavigationBar.
persistentFooterButtons، backgroundColor، bottomSheet، showModalBottomSheet و resizeToAvoidBottomInset بە دروستی بەکار بهێنیت.

The rest of the Scaffoldشوێنەکانی تری Scaffold

In MaterialApp and Scaffold you met the Scaffold and three of its slots: appBar, body and floatingActionButton. This lesson fills in the rest of the screen: where else the floating button can sit, the panels that slide in from the side, the bars at the bottom, buttons and sheets that stay at the bottom, the page colour and what happens when the keyboard opens.

لە وانەی MaterialApp و Scaffoldدا Scaffoldت ناسی لەگەڵ سێ شوێنی ناوی: appBar، body و floatingActionButton. ئەم وانەیە بەشەکانی تری شاشەکە پڕ دەکاتەوە: لە کوێی تر دادەنرێت، ئەو پانێڵانەی لە لاتەنیشتەوە دێنە ناوەوە، شریتەکانی خوارەوە، ئەو دوگمە و پەڕانەی لە خوارەوە دەمێننەوە، ڕەنگی پەڕەکە و ئەوەی کاتی کرانەوەی ڕوو دەدات.

The Scaffold properties in this lesson Scaffold لەم وانەیەدا
Scaffold property Scaffold	What it gives the screenچی دەدات بە شاشەکە
`floatingActionButtonLocation`	Where the floating action button sits. لە کوێ دادەنرێت.
`drawer`, `endDrawer`	Panels that slide in from the side.ئەو پانێڵانەی لە لاتەنیشتەوە دێنە ناوەوە.
`bottomNavigationBar`	A bar with the app's main sections.شریتێک بە بەشە سەرەکییەکانی .
`persistentFooterButtons`	Buttons that never scroll away.ئەو دوگمانەی هەرگیز بە ون نابن.
`backgroundColor`	The colour of the whole page.ڕەنگی هەموو پەڕەکە.
`bottomSheet`	Extra information fixed at the bottom.زانیاریی زیادە کە لە خوارەوە جێگیرە.
`resizeToAvoidBottomInset`	Whether the body shrinks when the keyboard opens.ئایا body بچووک دەبێتەوە کاتێک دەکرێتەوە.

Every one of these properties is optional. You add only the parts a screen really needs; a simple screen may use none of them.

هەموو ئەم ئارەزوومەندانەن. تەنها ئەو بەشانە زیاد دەکەیت کە شاشەکە بەڕاستی پێویستی پێیانە؛ دەکرێت شاشەیەکی سادە هیچیان بەکار نەهێنێت.

Where the floating button sitsدوگمەی کردەوەی سەرەکی لە کوێ دادەنرێت

floatingActionButtonLocation decides where the Scaffold puts its floating action button. You do not give it numbers; you choose one of the ready-made constants of the class FloatingActionButtonLocation. The course names four:

floatingActionButtonLocation دیاری دەکات Scaffold لە کوێ دابنێت. ژمارەی پێ نادەیت؛ یەکێک لە نرخە ئامادەکراوەکانی FloatingActionButtonLocation هەڵدەبژێریت. وانەکە چواریان دەژمێرێت:

endFloat — the default: it floats in the bottom end corner, above any bottom bar.
endDocked — at the end, with its centre sitting on the top edge of the bottom bar.
centerFloat — it floats in the middle at the bottom of the screen.
centerDocked — in the middle, sitting on the bottom bar's top edge.

endFloat — بنەڕەتە: لە گۆشەی خوارەوەی کۆتایی و لە سەرووی هەر شریتێکی خوارەوە دەوەستێت.
endDocked — لە لای کۆتایی، ناوەڕاستەکەی لەسەر لێواری سەرەوەی شریتی خوارەوەیە.
centerFloat — لە ناوەڕاستی خوارەوەی شاشەکەدا دەوەستێت.
centerDocked — لە ناوەڕاستدا، لەسەر لێواری سەرەوەی شریتی خوارەوە.

Four frames of the same phone screen titled 'This is Homepage' with a bottom bar. The + button moves: endFloat, bottom end corner above the bar; endDocked, at the end with its centre on the bar's top edge; centerFloat, in the middle above the bar; centerDocked, in the middle on the bar's edge. A small map beside the phone highlights the current spot of the four. — float = above the bar; docked = on the bar's top edge; end = right in English apps, left in Kurdish apps.float = لە سەرووی شریتەکە؛ docked = لەسەر لێواری سەرەوەی شریتەکە؛ end = لە ئینگلیزییەکاندا ڕاست، لە کوردییەکاندا چەپ.CêIT

Float means the button hovers 16 pixels above the bottom bar (or above the bottom of the screen). Docked means the button's centre lies on the top edge of the bottomNavigationBar, so it looks fixed to the bar. Docked places are made for screens that have a bottom bar; without one, the button just sits against the bottom edge.

Float واتە ١٦ لە سەرووی شریتی خوارەوە (یان لە سەرووی خوارەوەی شاشەکە) ڕادەوەستێت. Docked واتە ناوەڕاستی دەکەوێتە سەر لێواری سەرەوەی bottomNavigationBar، بۆیە وا دەردەکەوێت کە بە شریتەکەوە نووساوە. شوێنە dockedـەکان بۆ ئەو شاشانەن کە شریتی خوارەوەیان هەیە؛ بەبێ شریت تەنها بە لێواری خوارەوەی شاشەکەوە دەنووسێت.

A FAB docked in the middle of a BottomAppBarدوگمەی کردەوەی سەرەکی لە ناوەڕاستی BottomAppBar نووساوەDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class FabLocationDemo extends StatelessWidget {
  const FabLocationDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('This is Homepage')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: const BottomAppBar(
        child: Row(
          children: [Icon(Icons.home), Spacer(), Icon(Icons.settings)],
        ),
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 10

The button itself, as in the previous lesson.

خودی ، وەک وانەی پێشوو.

Lineدێڕی 14

The course's line: one constant chooses the place.

دێڕەکەی وانەکە: یەک نرخی جێگیر شوێنەکە هەڵدەبژێرێت.

Lineدێڕی 15-17

A simple BottomAppBar gives the docked button a bar to sit on.

BottomAppBarـێکی سادە شریتێک دەدات بە تا لەسەری دابنیشێت.

Quick checkپشکنینی خێراWhich location puts the FAB in the middle, with its centre on the top edge of the bottom bar?کام شوێن دەخاتە ناوەڕاست و ناوەڕاستەکەی لەسەر لێواری سەرەوەی شریتی خوارەوە دەبێت؟FloatingActionButtonLocation.centerDockedFloatingActionButtonLocation.centerDockedFloatingActionButtonLocation.endDockedFloatingActionButtonLocation.endDockedFloatingActionButtonLocation.centerFloatFloatingActionButtonLocation.centerFloat

Where the floating button sitsدوگمەی کردەوەی سەرەکی لە کوێ دادەنرێت

All 19 FAB locationsهەر ١٩ شوێنەکەی دوگمەی کردەوەی سەرەکی

19 places, not 4١٩ شوێن، نەک ٤

The course lists four locations. Flutter has 19 today. They are built from two words: where across (start, center, end) and where down (Float, Docked, Top, Contained). Every place except endContained also has a mini… version for the small FAB.

وانەکە چوار شوێن دەژمێرێت. ئەمڕۆ Flutter ١٩ شوێنی هەیە. لە دوو وشە دروست دەبن: لە کوێی پانی (start، center، end) و لە کوێی بەرزی (Float، Docked، Top، Contained). هەموو شوێنێک جگە لە endContained وەشانێکی mini…ـیشی هەیە بۆ بچووک.

FloatingActionButtonLocation constants (+ nine mini versions such as miniCenterFloat)نرخەکانی ⁦FloatingActionButtonLocation (+⁩ نۆ وەشانی mini وەک miniCenterFloat)
Down / Acrossبەرزی / پانی	start	center	end
Float: above the bottomFloat: لە سەرووی خوارەوە	`startFloat`	`centerFloat`	`endFloat` (default)`endFloat` (بنەڕەت)
Docked: on the bar's top edgeDocked: لەسەر لێواری شریت	`startDocked`	`centerDocked`	`endDocked`
Top: on the line under the app barTop: لەسەر هێڵی ژێر	`startTop`	`centerTop`	`endTop`
Contained: inside the bottom barContained: لە ناو شریتی خوارەوە	—	—	`endContained`

start and end follow the reading direction: in a Kurdish (right-to-left) app startFloat is on the right and endFloat on the left.

start و end بەدوای ئاڕاستەی خوێندنەوەدا دەڕۆن: لە کوردیدا () startFloat لە ڕاستە و endFloat لە چەپ.

Quick checkپشکنینی خێراIn a Kurdish (right-to-left) app, where does FloatingActionButtonLocation.startFloat put the button?لە کوردیدا ()، FloatingActionButtonLocation.startFloat لە کوێ دادەنێت؟Bottom leftخوارەوەی چەپTop right, under the app barسەرەوەی ڕاست، لە ژێر شریتی ئەپBottom rightخوارەوەی ڕاست

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

A drawer is a panel that slides in from the side of the screen, over the page. It usually holds links to the app's main places. It stays hidden until the user taps the ☰ (menu) button in the app bar or swipes in from the edge of the screen.

پانێڵێکە لە لاتەنیشتی شاشەوە دێتە ناوەوە و دەکەوێتە سەر پەڕەکە. زۆربەی جار بەستەری شوێنە سەرەکییەکانی لە خۆ دەگرێت. شاراوە دەمێنێتەوە تا دەست لە دوگمەی ☰ () لە دەدات، یان پەنجە لە لێواری شاشەکەوە بەرەو ناوەوە ڕادەکێشێت.

You give the Scaffold's drawer property a widget, usually a Drawer. If the AppBar has no leading widget, Flutter adds the ☰ button for you.

دەدەیت بە drawerـی Scaffold، زۆربەی جار Drawerـێک. ئەگەر AppBar هیچ leadingـێکی نەبێت، Flutter خۆی دوگمەی ☰ زیاد دەکات.

The drawer under a shop counterچەکمەجەی ژێر مێزی دووکان

A shopkeeper keeps a drawer under the counter. Customers do not see it, so the counter stays tidy, and he pulls it out only when he needs the receipt book. A Flutter drawer is the same: the menu stays hidden, so the page has more room, until the user pulls it out with ☰ or a swipe.

دووکاندارێک چەکمەجەیەکی لە ژێر مێزەکەیدا هەیە. کڕیاران نایبینن، بۆیە مێزەکە ڕێکوپێک دەمێنێتەوە و تەنها کاتێک دەیکێشێتە دەرەوە کە پێویستی بە دەفتەری پسوولە دەبێت. لە Flutterـدا هەروایە: شاراوە دەمێنێتەوە، بۆیە پەڕەکە شوێنی زیاترە، تا بە ☰ یان بە ڕاکێشانی پەنجە دەیکێشێتە دەرەوە.

Where the analogy stops workingسنووری ئەم نموونەیە

A Flutter drawer closes when the user taps outside it. Tapping an item inside it does not close it unless your code calls Navigator.pop(context) — the call that also closes a page (pop).

لە Flutterـدا کاتێک دەست لە دەرەوەی دەدات دادەخرێت. دەست لێدانی بڕگەیەک لە ناویدا دایناخات مەگەر کۆدەکەت Navigator.pop(context) بانگ بکات — هەمان بانگکردن کە پەڕەیەکیش دادەخات (pop).

Quick checkپشکنینی خێراA Scaffold has a drawer, and its AppBar has no leading. How can the user open the drawer?Scaffoldـێک drawerـی هەیە و AppBarـەکەی leadingـی نییە. چۆن دەتوانێت بکاتەوە؟With the ☰ button that Flutter adds, or by swiping in from the edgeبە دوگمەی ☰ کە Flutter زیادی دەکات، یان بە ڕاکێشانی پەنجە لە لێوارەوەOnly by swiping: without leading there is no buttonتەنها بە ڕاکێشانی پەنجە: بەبێ leading هیچ دوگمەیەک نییەIt cannot be opened until you add a button yourselfناکرێتەوە تا خۆت دوگمەیەک زیاد دەکەیت

📱 FULL Flutter Beginner Course • Programming Basics / Widgets / Navigation / User Input / UIMitch Koko · Englishئینگلیزی · 1.6M viewsبینین · 46K likesلایک · Partبەشی 51:33–55:36 (ofلە 2:23:25)
Mitch Koko's calm beginner course in Dart and Flutter: variables, operators, if/else, switch, loops, functions, collections, a first screen and a counter.
کۆرسە ئارامەکەی ⁦Mitch Koko⁩ بۆ سەرەتاییەکان لە و : ، ، `if/else`، `switch`، ، ، `List`/`Set`/`Map`، یەکەم شاشە و .
Watch 51:33-55:36 ('DRAWER'): the Scaffold's drawer adds the menu button, a DrawerHeader, ListTiles that open pages, and Navigator.pop to close the drawer.
لە ⁦51:33⁩ تا ⁦55:36⁩ سەیر بکە (DRAWER): `drawer`ـی `Scaffold` زیاد دەکات؛ پاشان `DrawerHeader`، چەند `ListTile`ـێک کە لاپەڕەی تر دەکەنەوە و `Navigator.pop` بۆ داخستنی .

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

Which edge does a drawer open from?لیستی لاتەنیشت لە کام لێوارەوە دەکرێتەوە؟

Which edge?کام لێوار؟

The course calls the drawer a "slider menu" that the user can swipe "left to right or right to left". A drawer opens only from the start edge of the screen: the left edge in an English app, the right edge in a Kurdish (right-to-left) app. The panel on the other edge is a different property, endDrawer (below).

وانەکە بە " خلیسکێنەر" ناو دەبات کە دەکرێت "لە چەپەوە بۆ ڕاست یان لە ڕاستەوە بۆ چەپ" ڕابکێشرێت. drawer تەنها لە لێواری سەرەتای شاشەکەوە دەکرێتەوە: لێواری چەپ لە ئینگلیزیدا، لێواری ڕاست لە کوردیدا (). پانێڵەکەی لێوارەکەی تر ترە بە ناوی endDrawer (لە خوارەوە).

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

Inside a drawer: a header and tilesناوەوەی لیستی لاتەنیشت: سەردێڕێک و ListTile

Lec4 gives the common recipe: a ListView with a DrawerHeader at the top, followed by ListTile items. The course has two drawer examples (Lec3 and Lec4); here they are joined into one complete, runnable screen:

⁦Lec4⁩ ڕێگە باوەکە دەدات: ListViewـێک کە DrawerHeaderـێک لە سەرەوەیەتی و دوای ئەو چەند ListTileـێک. وانەکە دوو نموونەی هەیە (⁦Lec3⁩ و ⁦Lec4⁩)؛ لێرەدا هەردووکیان بوونەتە یەک شاشەی تەواو کە جێبەجێ دەکرێت:

A drawer with a header, icons and a dividerلیستی لاتەنیشت لەگەڵ سەردێڕ، ئایکۆنەکان و هێڵی جیاکەرەوەDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: CoursePage()));

class CoursePage extends StatelessWidget {
  const CoursePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mobile App Course')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.green),
              child: Text(
                'Drawer Panel',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.people),
              title: const Text('Share'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.mail),
              title: const Text('Email'),
              onTap: () => Navigator.pop(context),
            ),
            const Divider(),
            ListTile(
              leading: const Icon(Icons.inbox),
              title: const Text('Primary'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.group),
              title: const Text('Social'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.local_offer),
              title: const Text('Promotions'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      body: const Center(child: Text('Swipe from the edge or tap ☰')),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 13

A ListView scrolls when the items do not fit on the screen.

ListView دەکرێت کاتێک بڕگەکان جێیان نابێتەوە.

Lineدێڕی 14

Removes the list's automatic top padding, so the header reaches the top edge (the Flutter cookbook marks this line as important).

خۆکاری سەرەوەی لیستەکە لادەبات، بۆ ئەوەی سەردێڕەکە بگاتە لێواری سەرەوە (کتێبی ڕێنمایی Flutter ئەم دێڕە بە گرنگ دادەنێت).

Lineدێڕی 16-17

DrawerHeader: a coloured box at the top of the drawer.

DrawerHeader: سندووقێکی ڕەنگاوڕەنگ لە سەرەوەی .

Lineدێڕی 24

leading: an icon before the item's text.

leading: پێش دەقی بڕگەکە.

Lineدێڕی 26

Closes the drawer when the item is tapped.

کاتێک دەست لە بڕگەکە دەدرێت دادەخات.

Lineدێڕی 33

A thin line between two groups of items.

هێڵێکی باریک لە نێوان دوو کۆمەڵە بڕگەدا.

The parts of a drawer. The ☰ button is added to the AppBar automatically.بەشەکانی . دوگمەی ☰ خۆکارانە دەخرێتە سەر AppBar.CêIT

What was fixed in the course's drawer codeچی لە کۆدی لیستی لاتەنیشتی وانەکەدا چاک کرا

Lec4's code puts style: inside DrawerHeader; it belongs inside the Text. The code does not compile.
It also writes new Text(...) inside a const <Widget>[...] list. new cannot appear in a constant list, and since Dart 2 new is never needed.
Neither example gives the items an onTap, so tapping them does nothing. A real drawer item acts and then closes the drawer with Navigator.pop(context).
The header text of a tutorial website and a screenshot with a real person's name and e-mail address are replaced with neutral examples.

کۆدی ⁦Lec4⁩ style: دەخاتە ناو DrawerHeader؛ شوێنی ڕاستی ناو Textـە. کۆدەکە کۆمپایل نابێت.
هەروەها new Text(...) لە ناو لیستی const <Widget>[...]دا دەنووسێت. new ناکرێت لە لیستێکی جێگیردا بێت و لە ⁦Dart 2⁩ـەوە هەرگیز پێویست نییە.
هیچ کام لە دوو نموونەکە onTap نادەن بە بڕگەکان، بۆیە دەست لێدانیان هیچ ناکات. بڕگەی ڕاستەقینە کارێک دەکات و پاشان بە Navigator.pop(context) دادەخات.
دەقی سەردێڕی ماڵپەڕێکی فێرکاری و کە ناو و ئیمەیڵی کەسێکی ڕاستەقینەی تێدایە بە نموونەی بێلایەن گۆڕدراون.

Quick checkپشکنینی خێراWhy does each ListTile in the drawer call Navigator.pop(context)?بۆچی هەر ListTileـێک لە Navigator.pop(context) بانگ دەکات؟To open the drawerبۆ کردنەوەی لیستە لاتەنیشتەکەTo close the drawer after the item is chosenبۆ داخستنی لیستە لاتەنیشتەکە دوای هەڵبژاردنی بڕگەکەTo delete the item from the listبۆ سڕینەوەی بڕگەکە لە لیستەکە

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

endDrawer: the panel on the other sideendDrawer: پانێڵەکەی لای تر

endDrawer is the same kind of panel, but on the opposite edge: the end edge. The course says it appears on the right side "by default"; more exactly, it is on the right in an English app and on the left in a Kurdish app. A screen may have both: the main menu in drawer and, for example, account settings or filters in endDrawer.

endDrawer هەمان جۆری پانێڵە، بەڵام لە لێواری بەرامبەر: لێواری کۆتایی. وانەکە دەڵێت بە بنەڕەت لە لای ڕاست دەردەکەوێت؛ وردتر، لە ئینگلیزیدا لە ڕاستە و لە کوردیدا لە چەپ. شاشەیەک دەتوانێت هەردووکیانی هەبێت: سەرەکی لە drawerدا و بۆ نموونە ڕێکخستنەکانی هەژمار یان پاڵێوەرەکان لە endDrawerدا.

A drawer and an end drawer on one screendrawer و endDrawer لە یەک شاشەداDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shop')),
      drawer: const Drawer(child: Center(child: Text('Main menu'))),
      endDrawer: Drawer(
        child: ListView(
          children: [
            const ListTile(title: Text('Account Settings')),
            ListTile(
              leading: const Icon(Icons.notifications),
              title: const Text('Notifications'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.close),
              title: const Text('Close Menu'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      body: const Center(child: Text('Products')),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 10

The main menu, at the start edge.

سەرەکی، لە لێواری سەرەتا.

Lineدێڕی 11

The second panel, at the end edge.

پانێڵی دووەم، لە لێواری کۆتایی.

When the Scaffold has an endDrawer and the AppBar has no actions, Flutter adds a ☰ button at the end of the app bar too, so the user can open it.

کاتێک Scaffold endDrawerـی هەیە و AppBar هیچ actionsـێکی نییە، Flutter دوگمەیەکی ☰ لە کۆتایی زیاد دەکات، بۆ ئەوەی بتوانێت بیکاتەوە.

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

Material 3 adds a ready-made drawer for navigation: NavigationDrawer. Instead of building ListTile rows yourself, you give it NavigationDrawerDestination items. It draws them in the Material 3 style and marks the selected one with a rounded indicator. Headers, dividers and other widgets can go between the destinations.

⁦Material 3⁩ ئامادە بۆ گەشت زیاد دەکات: NavigationDrawer. لە جیاتی ئەوەی خۆت ڕیزەکانی ListTile دروست بکەیت، بڕگەی NavigationDrawerDestinationـی پێ دەدەیت. بە شێوازی ⁦Material 3⁩ دەیانکێشێت و ئەوەی هەڵبژێردراوە بە نیشانەیەکی خڕ دیاری دەکات. سەردێڕ، هێڵی جیاکەرەوە و تر دەتوانن لە نێوان بڕگەکاندا بن.

The drawer must remember which item is selected, so the screen is a StatefulWidget: the index lives in its state, and setState changes it (Stateless and Stateful Widgets).

دەبێت لەبیری بێت کام بڕگە هەڵبژێردراوە، بۆیە شاشەکە StatefulWidgetـە: ژمارەی بڕگەکە لە دەژی و setState دەیگۆڕێت (ویجێتە بێ‌دۆخەکان و ویجێتە دۆخدارەکان).

NavigationDrawer with three destinationsNavigationDrawer بە سێ شوێنەوەDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class MailPage extends StatefulWidget {
  const MailPage({super.key});

  @override
  State<MailPage> createState() => _MailPageState();
}

class _MailPageState extends State<MailPage> {
  int _selected = 0;
  static const _titles = ['Inbox', 'Sent', 'Trash'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(_titles[_selected])),
      drawer: NavigationDrawer(
        selectedIndex: _selected,
        onDestinationSelected: (int index) {
          setState(() => _selected = index);
          Navigator.pop(context); // close the drawer
        },
        children: const [
          Padding(
            padding: EdgeInsets.fromLTRB(28, 16, 16, 10),
            child: Text('Mail'),
          ),
          NavigationDrawerDestination(icon: Icon(Icons.inbox), label: Text('Inbox')),
          NavigationDrawerDestination(icon: Icon(Icons.send), label: Text('Sent')),
          NavigationDrawerDestination(icon: Icon(Icons.delete), label: Text('Trash')),
        ],
      ),
      body: Center(child: Text('You are in ${_titles[_selected]}')),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 11

The selected item, kept in the state.

بڕگەی هەڵبژێردراو، لە هەڵگیراوە.

Lineدێڕی 18

NavigationDrawer goes into the same drawer slot.

NavigationDrawer دەچێتە هەمان شوێنی drawer.

Lineدێڕی 20-22

Remember the new index, then close the drawer.

ژمارە نوێیەکە لەبیر بگرە، پاشان دابخە.

Lineدێڕی 29

Each destination: an icon and a label.

هەر شوێنێک: و ناوێک.

Quick checkپشکنینی خێراWhy is MailPage a StatefulWidget?بۆچی MailPage StatefulWidgetـە؟NavigationDrawer cannot be used in a StatelessWidgetNavigationDrawer لە StatelessWidgetـدا بەکار ناهێنرێتEvery screen with a drawer must be statefulهەموو شاشەیەک کە لیستی لاتەنیشتی هەیە دەبێت دۆخدار بێتIt must remember the selected destination and rebuild when it changesدەبێت شوێنی هەڵبژێردراو لەبیر بگرێت و کاتی گۆڕانی دووبارە دروست ببێتەوە

bottomNavigationBar is a bar at the very bottom of the Scaffold, like a menu for the app's main sections: for example Home, Search and Profile. Each item has an icon and a short label, and tapping an item shows that section. Material Design advises three to five items.

bottomNavigationBar شریتێکە لە خوارترین بەشی Scaffold، وەک بۆ بەشە سەرەکییەکانی : بۆ نموونە Home، Search و Profile. هەر بڕگەیەک و ناوێکی کورتی هەیە و دەست لێدانی بڕگەیەک ئەو بەشە پیشان دەدات. ⁦Material Design⁩ سێ بۆ پێنج بڕگە پێشنیار دەکات.

A bar that never changesشریتێک کە هەرگیز ناگۆڕێت

The course's bar has currentIndex: 0 written as a fixed number and an empty onTap: (int indexOfItem) {}. Tapping Search calls onTap, but nothing changes: the bar still says item 0 is selected, and the page stays the same. The selected index is state — data that changes while the app runs — so it must live in a StatefulWidget, and onTap must update it with setState.

شریتەکەی وانەکە currentIndex: 0ـی وەک ژمارەیەکی جێگیر نووسیوە و onTap: (int indexOfItem) {}ـێکی بەتاڵی هەیە. دەست لێدانی Search onTap بانگ دەکات، بەڵام هیچ ناگۆڕێت: شریتەکە هێشتا دەڵێت بڕگەی 0 هەڵبژێردراوە و پەڕەکەش هەر وەک خۆی دەمێنێتەوە. ژمارەی بڕگەی هەڵبژێردراو — دراوەیەک کە لە کاتی کارکردنی دەگۆڕێت — بۆیە دەبێت لە StatefulWidgetـێکدا بژی و onTap بە setState نوێی بکاتەوە.

The course's bottom bar, made to workشریتی خوارەوەی وانەکە، کارپێکراوDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _index = 0; // which item is selected

  static const _pages = [
    Center(child: Text('Home page')),
    Center(child: Text('Search page')),
    Center(child: Text('Profile page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mobile App Course')),
      body: _pages[_index],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        fixedColor: Colors.red,
        items: const [
          BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
          BottomNavigationBarItem(label: 'Search', icon: Icon(Icons.search)),
          BottomNavigationBarItem(label: 'Profile', icon: Icon(Icons.account_circle)),
        ],
        onTap: (int indexOfItem) {
          setState(() => _index = indexOfItem);
        },
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 5

A StatefulWidget, because the selection changes.

StatefulWidget، چونکە هەڵبژاردنەکە دەگۆڕێت.

Lineدێڕی 13

The state: which item is selected.

: کام بڕگە هەڵبژێردراوە.

Lineدێڕی 15-19

One page for each item.

بۆ هەر بڕگەیەک پەڕەیەک.

Lineدێڕی 25

The body shows the page of the selected item.

body پەڕەی بڕگە هەڵبژێردراوەکە پیشان دەدات.

Lineدێڕی 27

The bar reads the selection from the state, not a fixed 0.

شریتەکە هەڵبژاردنەکە لە دەخوێنێتەوە، نەک لە 0ـی جێگیر.

Lineدێڕی 28

The colour of the selected item (the course uses red).

ڕەنگی بڕگەی هەڵبژێردراو (وانەکە سوور بەکار دەهێنێت).

Lineدێڕی 34-35

Save the tapped index and rebuild the screen.

ژمارەی بڕگەی لێدراو هەڵبگرە و شاشەکە دووبارە دروست بکەرەوە.

With four or more items, BottomNavigationBar switches to a shifting style by default: only the selected item shows its label. Add type: BottomNavigationBarType.fixed to keep every label visible.

کاتێک چوار بڕگە یان زیاتر هەبن، BottomNavigationBar بە بنەڕەت دەچێتە سەر شێوازی shifting: تەنها بڕگەی هەڵبژێردراو ناوەکەی پیشان دەدات. type: BottomNavigationBarType.fixed زیاد بکە بۆ ئەوەی هەموو ناوەکان دیار بمێنن.

Quick checkپشکنینی خێراIn the course's original code, why does tapping Search not select it?لە کۆدە ڕەسەنەکەی وانەکەدا، بۆچی دەست لێدانی Search هەڵی نابژێرێت؟Search needs a different iconSearch پێویستی بە ئایکۆنێکی ترەA bottom bar can only have two itemsشریتی خوارەوە تەنها دەتوانێت دوو بڕگەی هەبێتcurrentIndex is always 0 and onTap changes nothingcurrentIndex هەمیشە 0ـە و onTap هیچ ناگۆڕێت

bottomNavigationBar: the main sectionsbottomNavigationBar: بەشە سەرەکییەکان

BottomNavigationBar still works, but it has the older Material 2 look. Material 3's bottom bar is a new widget, NavigationBar: it is taller, has no fixed colour, and marks the selected item with a pill-shaped indicator. Flutter's Material 3 migration guide names NavigationBar as one of the widgets you should move to by hand. You put it in the same bottomNavigationBar slot.

BottomNavigationBar هێشتا کار دەکات، بەڵام ڕووخساری کۆنی ⁦Material 2⁩ـی هەیە. شریتی خوارەوەی ⁦Material 3⁩ نوێیە بە ناوی NavigationBar: بەرزترە، ڕەنگێکی جێگیری نییە و بڕگەی هەڵبژێردراو بە نیشانەیەکی حەبی دیاری دەکات. ڕێنمایی گواستنەوەی Flutter بۆ ⁦Material 3⁩ NavigationBar وەک یەکێک لەو ناو دەبات کە دەبێت بە دەست بۆیان بگوازیتەوە. لە هەمان شوێنی bottomNavigationBarدا دای دەنێیت.

The same three sections in the classic bar and in the Material 3 bar.هەمان سێ بەش لە شریتە کۆنەکە و لە شریتی ⁦Material 3⁩ـدا.CêIT

The same ideas under new namesهەمان بیرۆکەکان بە ناوی نوێوە
BottomNavigationBar (classic)BottomNavigationBar (کۆن)	NavigationBar (Material 3)NavigationBar (نوێ، ⁦Material 3⁩)
`items: [BottomNavigationBarItem(...)]`	`destinations: [NavigationDestination(...)]`
`currentIndex`	`selectedIndex`
`onTap`	`onDestinationSelected`
`fixedColor` / `selectedItemColor`	colours come from the themeڕەنگەکان لە دێن

The bottom bar with NavigationBarشریتی خوارەوە بە NavigationBarDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mobile App Course')),
      body: Center(child: Text('Page $_index')),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _index,
        onDestinationSelected: (int index) {
          setState(() => _index = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.account_circle), label: 'Profile'),
        ],
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 19

Which destination is selected — still from the state.

کام شوێن هەڵبژێردراوە — هێشتا لە .

Lineدێڕی 20-21

Same job as onTap: store the index and rebuild.

هەمان کاری onTap: ژمارەکە هەڵبگرە و دووبارە دروستی بکەرەوە.

Lineدێڕی 23-27

Each NavigationDestination has an icon and a label.

هەر NavigationDestinationـێک و ناوێکی هەیە.

The Ultimate Flutter Tutorial for Beginners - 2025 Full CourseFlutter Mapp · Englishئینگلیزی · 763K viewsبینین · 17K likesلایک · Partبەشی 50:05–53:53 (ofلە 5:16:54)
A friendly 2025 course whose short chapters show one Flutter widget at a time: layouts, the app frame, bars, buttons, lists and pictures.
کۆرسێکی دۆستانەی ⁦2025⁩ کە بەشە کورتەکانی هەر جارە یەک پیشان دەدەن: ، چوارچێوەی ، شریتەکان، ، و وێنەکان.
Watch 50:05-53:53 ('NavigationBar'): Material 3's bottom bar with destinations and a selected index.
لە ⁦50:05⁩ تا ⁦53:53⁩ سەیر بکە (NavigationBar): شریتی خوارەوەی ⁦Material 3⁩ لەگەڵ `destinations` و هەڵبژێردراو.

persistentFooterButtons is a list of widgets, usually buttons, shown in a row at the bottom of the Scaffold, above the bottomNavigationBar. Persistent means they always stay visible: when the body scrolls, they do not move. By default they sit at the end side of the row, with a thin line above them.

persistentFooterButtons لیستێکە لە ، زۆربەی جار دوگمە، کە لە ڕیزێکدا لە خوارەوەی Scaffold پیشان دەدرێن، لە سەرووی bottomNavigationBar. Persistent واتە هەمیشە دیار دەمێننەوە: کاتێک body دەکرێت، ئەوان ناجووڵێن. بە بنەڕەت لە لای کۆتایی ڕیزەکەدان و هێڵێکی باریک لە سەروویانە.

The course's two footer buttonsدوو دوگمەکەی خوارەوەی وانەکەDART

persistentFooterButtons: [
  ElevatedButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  ElevatedButton(
    onPressed: () {},
    child: const Icon(Icons.clear, color: Colors.amber),
  ),
],

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 2-5

An add button.

دوگمەی زیادکردن.

Lineدێڕی 6-9

A clear button with an amber icon.

دوگمەی پاککردنەوە بە زەرد.

backgroundColor sets the colour of the whole page behind the body. In Material 3 the default is the theme's surface colour (almost white in light mode, almost black in dark mode).

backgroundColor ڕەنگی هەموو پەڕەکە لە پشت body دیاری دەکات. لە ⁦Material 3⁩ـدا بنەڕەتەکەی ڕەنگی surfaceـی (لە دۆخی ڕووناکدا نزیکەی سپی و لە نزیکەی ڕەش).

Quick checkپشکنینی خێراA page has a long body that scrolls, persistentFooterButtons and a bottomNavigationBar. What happens to the footer buttons when the user scrolls?پەڕەیەک bodyـێکی درێژی هەیە کە دەکرێت، لەگەڵ persistentFooterButtons و bottomNavigationBar. کاتێک دەکات چی بە دوگمەکانی خوارەوە دێت؟They move to the top of the screenدەچنە سەرەوەی شاشەکەThey stay where they are, just above the bottom barلە شوێنی خۆیان دەمێننەوە، ڕێک لە سەرووی شریتی خوارەوەThey scroll away with the bodyلەگەڵ body تێپەڕکردن دەکرێن و ون دەبن

bottomSheet: extra information at the bottombottomSheet: زانیاریی زیادە لە خوارەوە

bottomSheet shows a piece of extra information about the page's main content, fixed at the bottom: for example the address and phone number of a shop under its list of offers. It stays visible (a persistent bottom sheet) and sits above the footer buttons and the bottom bar.

bottomSheet پارچەیەک زانیاریی زیادە دەربارەی ناوەڕۆکی سەرەکیی پەڕەکە پیشان دەدات کە لە خوارەوە جێگیرە: بۆ نموونە ناونیشان و ژمارەی تەلەفۆنی دووکانێک لە ژێر لیستی داشکاندنەکانی. دیار دەمێنێتەوە ( persistent) و لە سەرووی دوگمەکانی خوارەوە و شریتی خوارەوە دادەنیشێت.

Here is the course's screen with all three bottom parts and a yellow page:

ئەمە شاشەکەی وانەکەیە لەگەڵ هەر سێ بەشەکەی خوارەوە و پەڕەیەکی زەرد:

backgroundColor, bottomSheet, persistentFooterButtons and a bottom barbackgroundColor، bottomSheet، persistentFooterButtons و شریتی خوارەوەDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class ShopPage extends StatelessWidget {
  const ShopPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mobile App Course')),
      backgroundColor: Colors.yellow,
      body: const Center(child: Text('Today\'s offers')),
      bottomSheet: Container(
        height: 70,
        color: Colors.cyan[50],
        child: const Column(
          children: [
            Row(
              children: [
                Icon(Icons.place),
                SizedBox(width: 7),
                Text('12 Bazaar Street, Sulaymaniyah'),
              ],
            ),
            Row(
              children: [
                Icon(Icons.phone),
                SizedBox(width: 7),
                Text('0750 000 0000'),
              ],
            ),
          ],
        ),
      ),
      persistentFooterButtons: [
        ElevatedButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Icon(Icons.clear, color: Colors.amber),
        ),
      ],
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.account_circle), label: 'Profile'),
        ],
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 10

The page colour — with a comma.

ڕەنگی پەڕەکە — بە فاریزەوە.

Lineدێڕی 12

The sheet: a light-cyan box 70 pixels high.

: سندووقێکی شینی کاڵ بە بەرزیی ٧٠ .

Lineدێڕی 20

A small gap between the icon and the text.

بۆشاییەکی بچووک لە نێوان و دەقەکەدا.

Lineدێڕی 21

Made-up sample data, never a real address or phone number.

دراوەی نموونەی دروستکراو، هەرگیز ناونیشان یان ژمارەی ڕاستەقینە نا.

Lineدێڕی 34

The footer buttons.

دوگمەکانی خوارەوە.

Lineدێڕی 44

The bar at the very bottom.

شریتەکە لە خوارترین بەش.

Bottom to top: bottomNavigationBar, persistentFooterButtons, bottomSheet, then the body.لە خوارەوە بۆ سەرەوە: bottomNavigationBar، persistentFooterButtons، bottomSheet، پاشان body.CêIT

Quick checkپشکنینی خێراWhich order is right, from the very bottom of the screen upwards?کام ڕیزبەندی ڕاستە، لە خوارترین بەشی شاشەکەوە بەرەو سەرەوە؟bottomSheet → persistentFooterButtons → bottomNavigationBarلە خوارەوە: bottomSheet ← persistentFooterButtons ← bottomNavigationBarbottomNavigationBar → persistentFooterButtons → bottomSheetلە خوارەوە: bottomNavigationBar ← persistentFooterButtons ← bottomSheetpersistentFooterButtons → bottomNavigationBar → bottomSheetلە خوارەوە: persistentFooterButtons ← bottomNavigationBar ← bottomSheet

bottomSheet: extra information at the bottombottomSheet: زانیاریی زیادە لە خوارەوە

The bottomSheet property is always there. Often you want a sheet only for a moment: the user taps Options, a panel with choices slides up, the page behind it gets darker and cannot be used until the sheet closes. That is a modal bottom sheet. You do not put it in a property; you call showModalBottomSheet.

bottomSheet هەمیشە لەوێیە. زۆر جار پەڕەیەکت تەنها بۆ کاتێکی کورت دەوێت: دەست لە Options دەدات، پانێڵێک بە هەڵبژاردنەکانەوە لە خوارەوە بەرز دەبێتەوە، پەڕەی پشتەوە تاریکتر دەبێت و تا پەڕەکە دانەخرێت بەکار نایەت. ئەمە modalـە. نایخەیتە ناو ؛ showModalBottomSheet بانگ دەکەیت.

A modal bottom sheet with two choicesپەڕەیەکی خوارەوەی modal بە دوو هەڵبژاردنەوەDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class PhotoPage extends StatelessWidget {
  const PhotoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Photo')),
      body: Center(
        child: FilledButton(
          onPressed: () {
            showModalBottomSheet<void>(
              context: context,
              builder: (BuildContext context) {
                return SizedBox(
                  height: 160,
                  child: ListView(
                    children: [
                      ListTile(
                        leading: const Icon(Icons.share),
                        title: const Text('Share'),
                        onTap: () => Navigator.pop(context),
                      ),
                      ListTile(
                        leading: const Icon(Icons.delete),
                        title: const Text('Delete'),
                        onTap: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: const Text('Options'),
        ),
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 13

Opens the sheet on top of the page.

پەڕەکە لەسەر پەڕەی سەرەکی دەکاتەوە.

Lineدێڕی 15

builder returns what the sheet shows.

builder ئەوە دەگەڕێنێتەوە کە پەڕەکە پیشانی دەدات.

Lineدێڕی 23

Choosing an item closes the sheet, like a drawer.

هەڵبژاردنی بڕگەیەک پەڕەکە دادەخات، وەک .

Persistent and modal bottom sheets persistent و modal
Compareبەراوردکردن	`Scaffold.bottomSheetScaffold.bottomSheet`	`showModalBottomSheetshowModalBottomSheet`
When is it shown?کەی پیشان دەدرێت؟	Always, while the page is openهەمیشە، تا پەڕەکە کراوە بێت	Only when your code calls itتەنها کاتێک کۆدەکەت بانگی دەکات
The page behindپەڕەی پشتەوە	Still usableهێشتا بەکار دێت	Darkened and blockedتاریک کراوە و داخراوە
How it closesچۆن دادەخرێت	It does not; remove it from the codeداناخرێت؛ لە کۆدەکەدا لای ببە	`Navigator.pop`, a tap outside or a swipe down`Navigator.pop`، دەست لێدان لە دەرەوە یان ڕاکێشانی پەنجە بۆ خوارەوە

resizeToAvoidBottomInset: making room for the keyboardresizeToAvoidBottomInset: جێکردنەوە بۆ کیبۆرد

When a text field gets focus, the phone's on-screen keyboard slides up and covers the bottom part of the screen. That covered strip is called the bottom inset. resizeToAvoidBottomInset decides what the Scaffold does about it:

کاتێک ئامادە دەبێت بۆ نووسین، سەر شاشەی مۆبایلەکە بەرز دەبێتەوە و بەشی خوارەوەی شاشەکە دادەپۆشێت. ئەو پارچە داپۆشراوە پێی دەوترێت ⁦bottom inset⁩. resizeToAvoidBottomInset بڕیار دەدات Scaffold چی بکات:

true (the default): the body becomes shorter, so widgets at its bottom, such as a text field, move up above the keyboard. Floating widgets such as the FAB move up too.
false: the body keeps its full height and the keyboard simply covers its bottom part.

true (بنەڕەت): body کورتتر دەبێتەوە، بۆیە ئەو لە خوارەوەیدان، وەک ، دەچنە سەرووی . ئەو لەسەر پەڕەکە دەوەستن، وەک FAB، ئەوانیش بەرز دەبنەوە.
false: body هەموو بەرزییەکەی دەپارێزێت و تەنها بەشی خوارەوەی دادەپۆشێت.

Three frames of a chat-like screen with the title 'Mobile App Development Course', the text 'Messages appear here' and a 'Type here' field at the bottom. Frame 1: the keyboard is closed. Frame 2, resizeToAvoidBottomInset: true: the keyboard is open, the body is shorter and the field sits just above the keyboard. Frame 3, false: the keyboard covers the field. — true (default): the field moves up; false: the keyboard hides it.true (بنەڕەت): خانەکە بەرز دەبێتەوە؛ false: دەیشارێتەوە.CêIT

A message screen that makes room for the keyboardشاشەیەکی پەیام کە جێ بۆ کیبۆرد دەکاتەوەDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class MessagePage extends StatelessWidget {
  const MessagePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mobile App Development Course')),
      resizeToAvoidBottomInset: true, // the default: make room for the keyboard
      body: const Column(
        children: [
          Expanded(
            child: Center(child: Text('Messages appear here')),
          ),
          Padding(
            padding: EdgeInsets.all(12),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Type here',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 10

The default value, written out to show it. Try false.

، نووسراوە تا ببینرێت. false تاقی بکەرەوە.

Lineدێڕی 13

Expanded takes the free height, so the field stays at the bottom of the body.

Expanded بەرزییە بەتاڵەکە دەگرێت، بۆیە خانەکە لە خوارەوەی body دەمێنێتەوە.

Lineدێڕی 18

Tapping the field opens the keyboard.

دەست لێدانی خانەکە دەکاتەوە.

Quick checkپشکنینی خێراA chat screen has its text field at the bottom. The user taps the field and the keyboard hides it. What is the most likely cause?لە شاشەیەکی گفتوگۆدا لە خوارەوەیە. دەست لە خانەکە دەدات و دەیشارێتەوە. هۆکارە ئەگەرییەکە چییە؟resizeToAvoidBottomInset: false is set on the ScaffoldresizeToAvoidBottomInset: false لەسەر Scaffold دانراوەThe Scaffold has no app barScaffold شریتی ئەپی نییەThe text field has no labelخانەی دەقەکە ناونیشانی نییە

Common mistakesهەڵە باوەکان

Mistakeهەڵە	What happensچی ڕوو دەدات	Fixچاککردن
A drawer item with no `onTap`, or without `Navigator.pop(context)`بڕگەیەکی بەبێ `onTap` یان بەبێ `Navigator.pop(context)`	Tapping does nothing, or the drawer stays openدەست لێدان هیچ ناکات، یان کراوە دەمێنێتەوە	Act, then call `Navigator.pop(context)`کارەکە بکە، پاشان `Navigator.pop(context)` بانگ بکە
`currentIndex: 0` written as a fixed number`currentIndex: 0` وەک ژمارەیەکی جێگیر نووسراوە	The bottom bar never changesشریتی خوارەوە هەرگیز ناگۆڕێت	Keep the index in a `StatefulWidget` and update it with `setState`ژمارەکە لە `StatefulWidget`ـێکدا هەڵبگرە و بە `setState` نوێی بکەرەوە
Calling `setState` in a `StatelessWidget`بانگکردنی `setState` لە `StatelessWidget`ـێکدا	Compile error: there is no `setState` there: لەوێ `setState` نییە	Turn the screen into a `StatefulWidget`شاشەکە بکە بە `StatefulWidget`
A drawer's `ListView` without `padding: EdgeInsets.zeroListView`ـی بەبێ `padding: EdgeInsets.zero`	A gap above the headerبۆشاییەک لە سەرووی سەردێڕەکە	Add `padding: EdgeInsets.zeropadding: EdgeInsets.zero` زیاد بکە
Thinking `endDrawer` is always on the rightوا بیر بکەیتەوە کە `endDrawer` هەمیشە لە ڕاستە	Wrong design for a Kurdish appدیزاینی هەڵە بۆ کوردی	Think start and end: in Kurdish apps the end is the leftبە start و end بیر بکەرەوە: لە کوردییەکاندا کۆتایی لای چەپە
`backgroundColor: Colors.yellow;` inside `Scaffold(...)backgroundColor: Colors.yellow;` لە ناو `Scaffold(...)`	Syntax errorهەڵەی	End the argument with a comma بە فاریزە کۆتایی پێ بهێنە
Using `resizeToAvoidBottomPadding`بەکارهێنانی `resizeToAvoidBottomPadding`	The parameter does not exist any moreئەو ئیتر بوونی نییە	Use `resizeToAvoidBottomInsetresizeToAvoidBottomInset` بەکار بهێنە
A docked FAB location on a screen with no bottom barشوێنێکی docked بۆ FAB لە شاشەیەکی بێ شریتی خوارەوە	The button sits against the bottom edge بە لێواری خوارەوەوە دەنووسێت	Use a Float location, or add a bottom barشوێنێکی Float بەکار بهێنە، یان شریتێکی خوارەوە زیاد بکە

Exercisesڕاهێنانەکان

Exerciseڕاهێنان1. A drawer for a school app١. لیستی لاتەنیشت بۆ ئەپێکی قوتابخانە

Build a screen 'My School' with a drawer. The drawer has an indigo header with the white text 'My School' and three items with icons: Timetable, Marks and Library. Tapping an item closes the drawer.

شاشەیەکی '⁦My School⁩' دروست بکە کە هەبێت. سەردێڕێکی نیلی بە دەقی سپی '⁦My School⁩' و سێ بڕگەی هەیە کە هەریەکەیان هەیە: Timetable، Marks و Library. دەست لێدانی بڕگەیەک دادەخات.

Hintئاماژە

Drawer → ListView(padding: EdgeInsets.zero) → DrawerHeader + ListTile(leading, title, onTap).

ڕیزبەندییەکە: Drawer ← ⁦ListView(padding: EdgeInsets.zero)⁩ ← ⁦DrawerHeader + ListTile(leading, title, onTap)⁩.

Show answerوەڵامەکە پیشان بدە

One possible answerوەڵامێکی گونجاوDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class SchoolHome extends StatelessWidget {
  const SchoolHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My School')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.indigo),
              child: Text(
                'My School',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.calendar_month),
              title: const Text('Timetable'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.grade),
              title: const Text('Marks'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.local_library),
              title: const Text('Library'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      body: const Center(child: Text('Welcome!')),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 12

No gap above the header.

هیچ بۆشاییەک لە سەرووی سەردێڕەکە نییە.

Lineدێڕی 24

Each item closes the drawer.

هەر بڕگەیەک دادەخات.

Exerciseڕاهێنان2. The course's 'Account Settings' end drawer٢. endDrawerـی '⁦Account Settings⁩'ـی وانەکە

The course shows an end drawer called 'Account Settings' with the items Profile & Security, Notifications, Favorites, About and Log Out & Exit. Build it as an endDrawer with an icon before each item. Which edge will it open from in a Kurdish app?

وانەکە endDrawerـێک پیشان دەدات بە ناوی '⁦Account Settings⁩' بە بڕگەکانی ⁦Profile & Security⁩، Notifications، Favorites، About و ⁦Log Out & Exit⁩. وەک endDrawer دروستی بکە و پێش هەر بڕگەیەک دابنێ. لە کوردیدا لە کام لێوارەوە دەکرێتەوە؟

Show answerوەڵامەکە پیشان بدە

One possible answerوەڵامێکی گونجاوDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class StorePage extends StatelessWidget {
  const StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Store')),
      endDrawer: Drawer(
        child: ListView(
          children: [
            const ListTile(
              title: Text('Account Settings', style: TextStyle(fontSize: 20)),
            ),
            ListTile(
              leading: const Icon(Icons.security),
              title: const Text('Profile & Security'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.notifications),
              title: const Text('Notifications'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.favorite),
              title: const Text('Favorites'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: const Icon(Icons.info),
              title: const Text('About'),
              onTap: () => Navigator.pop(context),
            ),
            const Divider(),
            ListTile(
              leading: const Icon(Icons.logout),
              title: const Text('Log Out & Exit'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      body: const Center(child: Text('Products')),
    );
  }
}

In a Kurdish (right-to-left) app the end drawer opens from the left edge; in an English app from the right.

لە کوردیدا () endDrawer لە لێواری چەپەوە دەکرێتەوە؛ لە ئینگلیزیدا لە ڕاستەوە.

Exerciseڕاهێنان3. A FAB on the bottom bar٣. FAB لەسەر شریتی خوارەوە

A notes app has a BottomAppBar with a menu icon and a search icon. Put a + button with the tooltip 'New note' in the middle, sitting on the bar's top edge. Which two Scaffold properties do you need?

تێبینی BottomAppBarـێکی هەیە بە و گەڕان. دوگمەیەکی + بە tooltipـی '⁦New note⁩' لە ناوەڕاستدا دابنێ کە لەسەر لێواری سەرەوەی شریتەکە دانیشێت. پێویستت بە کام دوو Scaffold هەیە؟

Show answerوەڵامەکە پیشان بدە

floatingActionButton for the button and floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked for its place:

floatingActionButton بۆ و floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked بۆ شوێنەکەی:

One possible answerوەڵامێکی گونجاوDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class NotesHome extends StatelessWidget {
  const NotesHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Notes')),
      body: const Center(child: Text('No notes yet')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'New note',
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: const BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [Icon(Icons.menu), Icon(Icons.search)],
        ),
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 16

center + docked.

center (ناوەڕاست) + docked (نووساو بە شریتەوە).

Exerciseڕاهێنان4. Four sections with NavigationBar٤. چوار بەش بە NavigationBar

Change the course's bottom bar into a Material 3 NavigationBar with four destinations: Home, Search, Profile and Settings. The app bar title and the text in the middle of the page must show the name of the selected section.

شریتی خوارەوەی وانەکە بگۆڕە بۆ NavigationBarـی ⁦Material 3⁩ بە چوار شوێنەوە: Home، Search، Profile و Settings. ناونیشانی و دەقی ناوەڕاستی پەڕەکە دەبێت ناوی بەشی هەڵبژێردراو پیشان بدەن.

Hintئاماژە

You need a StatefulWidget, an int _index and setState.

پێویستت بە StatefulWidget، int _index و setState هەیە.

Show answerوەڵامەکە پیشان بدە

One possible answerوەڵامێکی گونجاوDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class ShopHome extends StatefulWidget {
  const ShopHome({super.key});

  @override
  State<ShopHome> createState() => _ShopHomeState();
}

class _ShopHomeState extends State<ShopHome> {
  int _index = 0;

  static const _titles = ['Home', 'Search', 'Profile', 'Settings'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(_titles[_index])),
      body: Center(child: Text('This is the ${_titles[_index]} page')),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _index,
        onDestinationSelected: (int index) {
          setState(() => _index = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.account_circle), label: 'Profile'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 13

One list of names serves the title, the page and the bar's order.

یەک لیستی ناو بۆ ناونیشان، پەڕە و ڕیزبەندیی شریتەکە بەکار دێت.

Lineدێڕی 23

The state changes, so the title and the body change too.

دەگۆڕێت، بۆیە ناونیشان و bodyـیش دەگۆڕێن.

Exerciseڕاهێنان5. Predict the screen٥. شاشەکە پێشبینی بکە

A login screen has two text fields at the bottom of a Column and resizeToAvoidBottomInset: false. What does the user see after tapping the second field? Suggest two ways to fix it.

شاشەیەکی چوونەژوورەوە دوو لە خوارەوەی Columnـێکدا هەیە و resizeToAvoidBottomInset: false. دوای دەست لێدانی خانەی دووەم چی دەبینێت؟ دوو ڕێگەی چاککردن پێشنیار بکە.

Show answerوەڵامەکە پیشان بدە

The keyboard opens over the bottom of the screen and covers the fields, because the body keeps its full height. Fix 1: remove the line (the default true shrinks the body). Fix 2: if the body must keep its height (for example a background picture), put the form in a SingleChildScrollView so the user can scroll the field into view.

لەسەر خوارەوەی شاشەکە دەکرێتەوە و خانەکان دادەپۆشێت، چونکە body هەموو بەرزییەکەی دەپارێزێت. چاککردنی ١: ئەو دێڕە لابە (trueـی بنەڕەت body بچووک دەکاتەوە). چاککردنی ٢: ئەگەر body دەبێت بەرزییەکەی بپارێزێت (بۆ نموونە وێنەیەکی پاشبنەما)، فۆڕمەکە بخە ناو SingleChildScrollView بۆ ئەوەی بتوانێت خانەکە بە بهێنێتە بەرچاو.

Summaryپوختە

floatingActionButtonLocation places the FAB: endFloat (default), endDocked, centerFloat, centerDocked and 15 more; end is the left in Kurdish apps.
drawer slides in from the start edge, endDrawer from the end edge. A drawer is usually Drawer → ListView → DrawerHeader + ListTiles, and each item closes it with Navigator.pop(context). Material 3 adds NavigationDrawer.
bottomNavigationBar shows the main sections. The selected index is state: keep it in a StatefulWidget and update it with setState. Material 3's bar is NavigationBar.
persistentFooterButtons stay above the bottom bar and never scroll; backgroundColor colours the whole page; bottomSheet shows fixed extra information; showModalBottomSheet opens a sheet on demand.
resizeToAvoidBottomInset (default true) shrinks the body when the keyboard opens. resizeToAvoidBottomPadding no longer exists.

floatingActionButtonLocation FAB دادەنێت: endFloat (بنەڕەت)، endDocked، centerFloat، centerDocked و ١٥ی تر؛ end لە کوردییەکاندا چەپە.
drawer لە لێواری سەرەتاوە دێتە ناوەوە و endDrawer لە لێواری کۆتاییەوە. زۆربەی جار Drawer ← ListView ← DrawerHeader + ListTileـە و هەر بڕگەیەک بە Navigator.pop(context) دایدەخات. ⁦Material 3⁩ NavigationDrawer زیاد دەکات.
bottomNavigationBar بەشە سەرەکییەکان پیشان دەدات. ژمارەی هەڵبژێردراو : لە StatefulWidgetـێکدا هەڵیبگرە و بە setState نوێی بکەرەوە. شریتی ⁦Material 3⁩ NavigationBarـە.
persistentFooterButtons لە سەرووی شریتی خوارەوە دەمێننەوە و هەرگیز ناکرێن؛ backgroundColor هەموو پەڕەکە ڕەنگ دەکات؛ bottomSheet زانیاریی زیادەی جێگیر پیشان دەدات؛ showModalBottomSheet پەڕەیەک کاتی پێویست دەکاتەوە.
resizeToAvoidBottomInset (بنەڕەت true) body بچووک دەکاتەوە کاتێک دەکرێتەوە. resizeToAvoidBottomPadding ئیتر بوونی نییە.

Review questionsپرسیارەکانی پێداچوونەوە

What is the difference between drawer and endDrawer?جیاوازیی drawer و endDrawer چییە؟

Only the edge: drawer opens from the start edge (left in English, right in Kurdish apps), endDrawer from the end edge.

تەنها لێوارەکە: drawer لە لێواری سەرەتاوە دەکرێتەوە (لە ئینگلیزییەکاندا چەپ، لە کوردییەکاندا ڕاست) و endDrawer لە لێواری کۆتاییەوە.

Why must a working bottom navigation bar be inside a StatefulWidget?بۆچی شریتی ڕێنیشاندانی خوارەوەی کارپێکراو دەبێت لە ناو StatefulWidgetـێکدا بێت؟

The selected index changes when the user taps. It must be kept in a State object and changed with setState, so the bar and the body are built again.

ژمارەی هەڵبژێردراو کاتی دەست لێدان دەگۆڕێت. دەبێت لە Stateـدا هەڵبگیرێت و بە setState بگۆڕدرێت، بۆ ئەوەی شریتەکە و body دووبارە دروست ببنەوە.

What is the difference between float and docked FAB locations?جیاوازیی شوێنەکانی float و dockedـی FAB چییە؟

A floating FAB hovers above the bottom bar; a docked FAB has its centre on the bar's top edge.

FABـی float لە سەرووی شریتی خوارەوە ڕادەوەستێت؛ FABـی docked ناوەڕاستەکەی لەسەر لێواری سەرەوەی شریتەکەیە.

What replaced resizeToAvoidBottomPadding?چی جێگەی resizeToAvoidBottomPaddingـی گرتەوە؟

resizeToAvoidBottomInset. The old parameter was deprecated in Flutter 1.1.9 and later removed.

resizeToAvoidBottomInset. کۆنەکە لە ⁦Flutter 1.1.9⁩ـدا کرا و دواتر لابرا.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Container: Size, Padding, Margin and AlignmentContainer: قەبارە، بۆشایی ناوەوە، پەراوێز و ڕێکخستنی شوێن

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.

Drawers, Bottom Bars and Sheetsلیستە لاتەنیشتەکان، شریتەکانی خوارەوە و پەڕەی خوارەوە

What you will learnچی فێر دەبیت

The rest of the Scaffoldشوێنەکانی تری Scaffold

Where the floating button sitsدوگمەی کردەوەی سەرەکی لە کوێ دادەنرێت

All 19 FAB locationsهەر ١٩ شوێنەکەی دوگمەی کردەوەی سەرەکی

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

Which edge does a drawer open from?لیستی لاتەنیشت لە کام لێوارەوە دەکرێتەوە؟

Inside a drawer: a header and tilesناوەوەی لیستی لاتەنیشت: سەردێڕێک و ListTile

endDrawer: the panel on the other sideendDrawer: پانێڵەکەی لای تر

Material 3: NavigationDrawerNavigationDrawer لە ⁦Material 3⁩ـدا

bottomNavigationBar: the main sectionsbottomNavigationBar: بەشە سەرەکییەکان

Material 3: NavigationBarNavigationBar لە ⁦Material 3⁩ـدا

persistentFooterButtons and backgroundColorpersistentFooterButtons و backgroundColor

bottomSheet: extra information at the bottombottomSheet: زانیاریی زیادە لە خوارەوە

resizeToAvoidBottomInset: making room for the keyboardresizeToAvoidBottomInset: جێکردنەوە بۆ کیبۆرد

Common mistakesهەڵە باوەکان

Exercisesڕاهێنانەکان

Summaryپوختە

Lesson complete!وانەکە تەواو بوو!

Key termsزاراوە سەرەکییەکان

Related lecturesوانە پەیوەندیدارەکان

Drawers, Bottom Bars and Sheetsلیستە لاتەنیشتەکان، شریتەکانی خوارەوە و پەڕەی خوارەوە

What you will learnچی فێر دەبیت

The rest of the Scaffoldشوێنەکانی تری Scaffold

Where the floating button sitsدوگمەی کردەوەی سەرەکی لە کوێ دادەنرێت

All 19 FAB locationsهەر ١٩ شوێنەکەی دوگمەی کردەوەی سەرەکی

drawer: a panel from the sidedrawer: پانێڵێک لە لاتەنیشتەوە

Which edge does a drawer open from?لیستی لاتەنیشت لە کام لێوارەوە دەکرێتەوە؟

Inside a drawer: a header and tilesناوەوەی لیستی لاتەنیشت: سەردێڕێک و ListTile

endDrawer: the panel on the other sideendDrawer: پانێڵەکەی لای تر

Material 3: NavigationDrawerNavigationDrawer لە ⁦Material 3⁩ـدا

bottomNavigationBar: the main sectionsbottomNavigationBar: بەشە سەرەکییەکان

Material 3: NavigationBarNavigationBar لە ⁦Material 3⁩ـدا

persistentFooterButtons and backgroundColorpersistentFooterButtons و backgroundColor

bottomSheet: extra information at the bottombottomSheet: زانیاریی زیادە لە خوارەوە

A sheet on demand: showModalBottomSheetپەڕەیەک کاتی پێویست: showModalBottomSheet

resizeToAvoidBottomInset: making room for the keyboardresizeToAvoidBottomInset: جێکردنەوە بۆ کیبۆرد

Common mistakesهەڵە باوەکان

Exercisesڕاهێنانەکان

Summaryپوختە

Lesson complete!وانەکە تەواو بوو!

Key termsزاراوە سەرەکییەکان

Related lecturesوانە پەیوەندیدارەکان