Flutter Expanded Widget

Flutter Expanded Widget and Flexible Widgets

When building responsive layouts in Flutter, mastering Expanded and Flexible widgets is essential. These two widgets are commonly used to manage space within Row, Column, and Flex widgets, allowing you to create adaptable layouts that adjust smoothly to screen size changes. Knowing when and how to use Expanded and Flexible ensures that your app’s UI looks polished and responsive.

In this blog, we’ll explore Expanded and Flexible widgets, their differences, and practical use cases with code examples.

1. Introduction to Expanded and Flexible Widgets

The Expanded and Flexible widgets are both part of Flutter’s layout system and allow children widgets to expand to fill available space. They’re particularly useful in Row and Column layouts where elements need to adapt to different screen sizes or available space dynamically.

What is the Expanded Widget?

The Expanded widget expands a child of a Row, Column, or Flex to fill the available space along the main axis (horizontal in Row, vertical in Column). It divides the space proportionally if there are multiple Expanded widgets.

What is the Flexible Widget?

The Flexible widget provides more control over space allocation by allowing the child to resize while respecting its flex factor. It doesn’t force the child to fill the entire space but allows it to take as much as it needs.

2. Expanded Widget in Flutter

When to Use Expanded?

Use Expanded when you want a widget to take up all remaining space within a Row, Column, or Flex. Expanded works well when the layout needs to fill space evenly without constraints.

Code Example for Expanded

Here’s a simple example demonstrating Expanded in a Column layout:

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('Expanded Widget Example')),
        body: Column(
          children: [
            Container(
              height: 100,
              color: Colors.red,
              child: Center(child: Text('Fixed Height Container')),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Center(child: Text('Expanded Container')),
              ),
            ),
            Container(
              height: 100,
              color: Colors.green,
              child: Center(child: Text('Fixed Height Container')),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation:

• Container 1 and 3 have fixed heights, while Container 2 is wrapped in an Expanded widget.
• The Expanded widget forces Container 2 to fill all available vertical space between Container 1 and 3.

3. Flexible Widget in Flutter

When to Use Flexible?

The Flexible widget is useful when you want more control over how a widget takes up available space. Unlike Expanded, it won’t force the child to take up all available space, allowing for more controlled, proportional layouts.

Code Example for Flexible

Here’s an example demonstrating how Flexible can be used within a Row to proportionally divide available space:

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('Flexible Widget Example')),
        body: Row(
          children: [
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.blue,
                child: Center(child: Text('Flex 1')),
              ),
            ),
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.orange,
                child: Center(child: Text('Flex 2')),
              ),
            ),
            Flexible(
              flex: 3,
              child: Container(
                color: Colors.green,
                child: Center(child: Text('Flex 3')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation:

• Each child of the Row is wrapped in a Flexible widget with different flex factors.
• The flex values of 1, 2, and 3 mean that the containers will take up space in a 1:2:3 ratio.

4. Key Differences Between Expanded and Flexible

Expanded vs Flexible

In short:

• Use Expanded when you want a widget to fill available space completely.
• Use Flexible when you want to control the proportion of space each child widget occupies without necessarily filling it.

5. Nested Expanded and Flexible Widgets

You can nest Expanded and Flexible widgets for more complex layouts. For example, if you have a Column layout where each row needs proportional widths but should fill the entire column height, nesting both can give you flexible control.

Code Example:

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('Nested Expanded and Flexible Example')),
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Flexible(
                    flex: 2,
                    child: Container(color: Colors.red),
                  ),
                  Flexible(
                    flex: 3,
                    child: Container(color: Colors.blue),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Flexible(
                    flex: 1,
                    child: Container(color: Colors.green),
                  ),
                  Flexible(
                    flex: 1,
                    child: Container(color: Colors.orange),
                  ),
                  Flexible(
                    flex: 1,
                    child: Container(color: Colors.purple),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation:

• Outer Expanded widgets divide the Column into two halves.
• Each Row inside these Expanded widgets uses Flexible with varying flex values, allowing for controlled widths within each Expanded section.

6. Best Practices for Using Expanded and Flexible

To ensure you’re making the most of Expanded and Flexible in Flutter, consider these best practices:

• Use Expanded for Full-Screen Fill: When you need a widget to take up the remaining space, Expanded is the better choice.
• Use Flexible for Ratios: When laying out widgets with different space proportions, Flexible’s flex factor provides more precise control.
• Avoid Over-Nesting: Complex layouts can become difficult to manage with too many nested Expanded/Flexible widgets. Use custom widgets for readability.
• Experiment with Flex Ratios: Start with simple flex values (e.g., 1, 2, 3) and adjust based on your layout needs for better control.
• Use Flexible in Lists with Dynamic Content: For lists or rows where the size of content may vary, Flexible allows them to adjust to their own size without forcing a full fill.

Conclusion

Mastering Expanded and Flexible in Flutter allows you to create adaptable, responsive layouts for your mobile applications. While Expanded forces children to fill available space, Flexible offers more control over proportions, making it ideal for more complex layouts. By understanding the differences and experimenting with code examples, you can take full advantage of Flutter’s layout system to build user-friendly, visually appealing interfaces.

This guide provides a foundation to help you confidently use Expanded and Flexible in your Flutter projects, making your app layouts dynamic and responsive.

Explore Other Flutter Topics…

1. Introduction to Flutter and Dart
2. Why choose Flutter
3. Installing Flutter On Your Windows Mac And Linux System
4. Your first Flutter app
5. Flutter project structure
6. Building blocks of Flutter
7. Stateful vs. Stateless Widgets Explained
8. Flutter layout system
9. Flutter text widget
10. Creating Buttons in Flutter: ElevatedButton, TextButton, and IconButton
11. Handling User Input with Flutter Forms
12. Container class in Flutter
13. Flutter Navigation
14. Flutter – Pass Data One Screen To Another Screen
15. Managing Device Orientation in Flutter
16. Stateful widget lifecycle in Flutter
17. Future of Flutter
18. Flutter Themes
19. Flutter Animations
20. Flutter AppBar Customization
21. ListView in Flutter
22. Flutter GridView
23. Flutter Expanded Widget
24. Flutter BottomNavigation Bar
25. Floating Action Button
26. Drawer Widgets in Flutter
27. Form Validation in Flutter
28. Flutter TextField
29. Adding AdMob ads to a Flutter app
30. Building Flutter Web & Desktop Applications
31. What is Async and Await in Flutter
32. HTTP requests in Flutter
33. Parsing JSON in Flutter
34. Tinder-Style Swipe Cards in Flutter
35. Flutter Tic Tac Toe Game Tutorial
36. Flutter Login UI Tutorial
37. Flutter Card Widget Tutorial
38. Flutter music player app tutorial
39. Flutter introduction screens
40. Shared Preferences in Flutter
41. SQLite Database in Flutter
42. Firebase Authentication in Flutter
43. Firebase Firestore in Flutter
44. Push Notifications in Flutter
45. Handling File Uploads in Flutter
46. Responsive Design in Flutter
47. Provider in Flutter
48. Riverpod in Flutter
49. Flutter BLoC Pattern Tutorial