Getting Started with Flutter: A Beginner's Guide to Cross-Platform App Development

📘 Chapter 4: Layouts and Navigation in Flutter

🧭 What You’ll Learn

This chapter focuses on building responsive layouts and implementing multi-screen navigation in Flutter. By the end, you’ll be able to:

• Use layout widgets like Column, Row, Stack, Expanded, and Flexible
• Create responsive designs with MediaQuery and LayoutBuilder
• Build multi-screen apps with Navigator and named routes
• Pass data between screens
• Manage the navigation stack

📐 Layout System in Flutter

In Flutter, everything is a widget—including layouts. Layout widgets organize UI components in a structured, responsive manner.

🔲 Basic Layout Widgets

1. Container

A versatile widget for spacing, background color, size, and decoration.

dart

Container(

  padding: EdgeInsets.all(16),

  color: Colors.blue,

  child: Text('Hello'),

)

2. Row and Column

Use Row for horizontal layout and Column for vertical.

dart

Row(

  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  children: [Icon(Icons.star), Icon(Icons.star_border)],

)

dart

Column(

  mainAxisAlignment: MainAxisAlignment.center,

  children: [Text('Top'), Text('Bottom')],

)

3. Expanded and Flexible

Used within Row or Column to control space distribution.

dart

Row(

  children: [

    Expanded(child: Container(color: Colors.red, height: 100)),

    Expanded(child: Container(color: Colors.green, height: 100)),

  ],

)

4. Stack and Positioned

Overlays widgets on top of each other.

dart

Stack(

  children: [

    Container(height: 200, color: Colors.grey),

    Positioned(top: 10, left: 10, child: Text('Overlay')),

  ],

)

🧱 Layout Summary Table

🔍 Responsive Layouts

✅ Using MediaQuery

Provides screen size, orientation, padding, etc.

dart

double width = MediaQuery.of(context).size.width;

Container(

  width: width * 0.5,

  color: Colors.amber,

)

✅ Using LayoutBuilder

Gives constraints to build responsive UI based on space available.

dart

LayoutBuilder(

  builder: (context, constraints) {

    if (constraints.maxWidth > 600) {

      return Text('Tablet layout');

    } else {

      return Text('Mobile layout');

    }

  },

)

🧭 Navigation in Flutter

Flutter uses a stack-based navigation system. Screens are pushed and popped like a stack.

🔁 Basic Navigation: Navigator.push

Navigate to a new screen:

dart

Navigator.push(

  context,

  MaterialPageRoute(builder: (context) => SecondScreen()),

);

Back to previous screen:

dart

Navigator.pop(context);

🧱 Example: Two-Screen App

🔹 First Screen

dart

ElevatedButton(

  onPressed: () {

    Navigator.push(

      context,

      MaterialPageRoute(builder: (context) => SecondScreen()),

    );

  },

  child: Text('Go to Second Screen'),

)

🔹 Second Screen

dart

Scaffold(

  appBar: AppBar(title: Text('Second Screen')),

  body: Center(

    child: ElevatedButton(

      child: Text('Go Back'),

      onPressed: () => Navigator.pop(context),

    ),

  ),

)

📦 Named Routes

Good for apps with many screens.

🔹 Define Routes in MaterialApp

dart

MaterialApp(

  initialRoute: '/',

  routes: {

    '/': (context) => HomePage(),

    '/second': (context) => SecondPage(),

  },

)

🔹 Navigate Using Names

dart

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

📤 Passing Data Between Screens

🔹 Send Data

dart

Navigator.push(

  context,

  MaterialPageRoute(

    builder: (context) => SecondScreen(data: 'Hello!'),

  ),

);

🔹 Receive Data

dart

class SecondScreen extends StatelessWidget {

  final String data;

  SecondScreen({required this.data});

}

🔁 Returning Data to Previous Screen

🔹 Await a Result

dart

final result = await Navigator.push(

  context,

  MaterialPageRoute(builder: (context) => InputScreen()),

);

print('Returned: $result');

🔹 Send Result Back

dart

Navigator.pop(context, 'Some value');

🧩 Navigation Drawer Example

Used for side menu navigation.

dart

Scaffold(

  drawer: Drawer(

    child: ListView(

      children: [

        DrawerHeader(child: Text('Menu')),

        ListTile(

          title: Text('Page 1'),

          onTap: () => Navigator.pushNamed(context, '/page1'),

        ),

      ],

    ),

  ),

)

🔄 Bottom Navigation Bar Example

dart

BottomNavigationBar(

  currentIndex: selectedIndex,

  onTap: (index) => setState(() => selectedIndex = index),

  items: [

    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),

    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),

  ],

)

📘 Best Practices for Layout and Navigation

• ✅ Keep layout code modular (split into small widgets)
• ✅ Use SafeArea to avoid overlapping system UI
• ✅ Use named routes for scalable navigation
• ✅ Use PageView for swipeable content
• ✅ Avoid deep nesting; use builder methods

✅ Summary

In this chapter, you’ve learned:

• How to structure UI with Flutter layout widgets
• How to build responsive designs using MediaQuery and LayoutBuilder
• How to navigate between screens using Navigator and named routes
• How to pass data between screens and return results
• How to implement common navigation patterns (drawer, tabs, bottom nav)

This sets the stage for adding state management and interactivity, coming up in Chapter 5: State Management Essentials.