Flutter UI & Navigation

Building a great mobile app is as much about the layout as it is about the logic. Flutter provides a rich set of layout widgets that allow you to align, stack, and nest elements with precision. Once you have multiple screens, you'll need to learn how to move between them using Flutter's Navigation system.

Why This Topic Matters

A single-screen app is rarely useful. Most apps consist of multiple screens: a login screen, a home feed, a profile page, etc. Mastering layout widgets like Row, Column, and Stack is essential for creating responsive designs that look good on any screen size. Understanding Navigator is the key to creating a cohesive user experience where users can move forward to new content and back to where they came from.

How To Study This Chapter

Layout in Flutter is all about constraints. Parents pass constraints to their children, and children tell their parents what size they want to be. Try nesting Row inside Column and vice-versa to see how the layout changes. For navigation, visualize a stack of cards—when you move to a new screen, you're placing a new card on top.

Layout Widgets

Column and Row

These are the workhorses of Flutter layout. Column arranges children vertically, and Row arranges them horizontally.

Column(
  mainAxisAlignment: MainAxisAlignment.center, // Vertical alignment
  crossAxisAlignment: CrossAxisAlignment.start, // Horizontal alignment
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Row(
      children: [
        Icon(Icons.star),
        Text('Rating: 5.0'),
      ],
    ),
  ],
)

Stack

Stack allows you to place widgets on top of each other. This is useful for overlaying text on an image or creating custom badges.

Stack(
  children: [
    Container(width: 100, height: 100, color: Colors.blue),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Overlay'),
    ),
  ],
)

Material Design

Flutter comes with a built-in implementation of Material Design, Google's design system. Using widgets like Scaffold, AppBar, and FloatingActionButton gives your app a professional look and feel out of the box.

Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: Center(child: Text('Content')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Navigation

Flutter uses a Navigator to manage screens (routes).

Pushing a New Route

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
  },
  child: Text('Go to Second Screen'),
)

Popping a Route

ElevatedButton(
  onPressed: () {
    Navigator.pop(context); // Goes back to the previous screen
  },
  child: Text('Go Back'),
)

Named Routes

For larger apps, named routes make navigation easier to manage.

// In MaterialApp
routes: {
  '/': (context) => HomeScreen(),
  '/details': (context) => DetailsScreen(),
},

// Navigating
Navigator.pushNamed(context, '/details');

In the next chapter, we'll start our journey into the cloud by setting up Firebase for our Flutter project!