2. Flutter App Structure & Navigation Widgets

---

Flutter App Structure & Navigation Widgets: #

Define the app’s overall structure, layout, and navigation flow between screens.

1. MaterialApp #

The root widget of every Flutter app that uses Material Design. It defines the theme, routes, and navigation behavior.

void main() {
  runApp(MaterialApp(
    title: 'My Flutter App',
    theme: ThemeData(primarySwatch: Colors.blue),
    home: HomeScreen(),
    routes: {
      '/about': (context) => AboutScreen(),
    },
  ));
}

Key properties:

• home: The default screen.
• routes: Defines named routes.
• theme: App-wide styling.
• debugShowCheckedModeBanner: false → hides debug banner.

---

2. Scaffold #

The foundation for a typical screen layout in Flutter. Provides structure with app bar, body, drawer, FAB, and bottom navigation.

Scaffold(
  appBar: AppBar(title: Text('Dashboard')),
  drawer: Drawer(child: Text('Menu')),
  body: Center(child: Text('Welcome')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

Common areas:

• appBar
• body
• drawer
• floatingActionButton
• bottomNavigationBar

---

3. AppBar & SliverAppBar #

• AppBar: The top navigation bar used on most screens.
• SliverAppBar: Used with CustomScrollView for scrollable, collapsible headers.

AppBar(
  title: Text('Profile'),
  actions: [IconButton(onPressed: () {}, icon: Icon(Icons.settings))],
);

SliverAppBar Example:

SliverAppBar(
  floating: true,
  pinned: true,
  expandedHeight: 200,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Flutter Widgets'),
    background: Image.asset('assets/header.jpg', fit: BoxFit.cover),
  ),
);

---

4. TabBar & TabBarView #

Used for switching between multiple pages using tabs.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Tabs Example'),
      bottom: TabBar(
        tabs: [
          Tab(text: 'Home'),
          Tab(text: 'Profile'),
          Tab(text: 'Settings'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Home Page')),
        Center(child: Text('Profile Page')),
        Center(child: Text('Settings Page')),
      ],
    ),
  ),
);

---

5. Drawer (Sidebar Menu) #

A hidden side menu for navigation or quick actions.

Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(color: Colors.blue),
        child: Text('Menu', style: TextStyle(color: Colors.white)),
      ),
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
        onTap: () => Navigator.pushNamed(context, '/home'),
      ),
      ListTile(
        leading: Icon(Icons.settings),
        title: Text('Settings'),
        onTap: () {},
      ),
    ],
  ),
);

---

6. BottomNavigationBar #

Common navigation method for switching between top-level app sections.

BottomNavigationBar(
  currentIndex: 0,
  onTap: (index) {},
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
);

---

7. NavigationRail #

A sidebar navigation alternative for larger screens (tablet, desktop).

NavigationRail(
  selectedIndex: 0,
  onDestinationSelected: (int index) {},
  destinations: const [
    NavigationRailDestination(
      icon: Icon(Icons.home),
      label: Text('Home'),
    ),
    NavigationRailDestination(
      icon: Icon(Icons.settings),
      label: Text('Settings'),
    ),
  ],
);

---

8. Navigator & PageRoute #

Controls navigation between pages (screens).

Push a new page:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailScreen()),
);

Pop back:

Navigator.pop(context);

With Named Routes:

Navigator.pushNamed(context, '/about');

---

9. CupertinoPageRoute (iOS-Style Navigation) #

Used for iOS-like transitions.

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => ProfileScreen()),
);

---

Best Practices #

• Use MaterialApp.router for large apps (with GoRouter or Beamer).
• Use Navigator.pushReplacement for login flows.
• Always keep navigation consistent and intuitive.
• Prefer named routes for scalable projects.