Essential Flutter Widgets Every Developer Should Know

Flutter widgets are the fundamental building blocks of any Flutter app’s user interface. In Flutter, everything is a widget - from text and buttons to layouts and the entire app structure. This article covers the essential Flutter widgets every developer needs to know, including Container, Text, Scaffold, and more, with practical examples.

If you prefer to learn visually, here’s a quick video walkthrough that covers the same concepts. It’s a good option for visual learners who’d rather see things in action.

What are widgets in Flutter?

A widget is the basic unit of the user interface in Flutter. Imagine it as a blueprint for how something should look and behave on the screen. In most UI frameworks, you have separate elements for structure, styling, and interaction, but Flutter bundles all of that into widgets. Everything in Flutter is a widget. A widget is represented by a text label, a button, a row layout, a color background, and even the app itself.

These Flutter widgets are combined in a hierarchy called the widget tree, where parent widgets contain child widgets, and those children can have their own children. Flutter follows a declarative UI model. Instead of manually updating UI elements when something changes, you describe what the UI should look like for a given state, and Flutter rebuilds the relevant widgets automatically.

Now that you know what a widget in Flutter is, the next step is understanding the two main kinds of widgets - Stateless and Stateful, and when to use each.

What are the two types of Flutter widgets?

All widgets in Flutter fall into one of two categories which are Stateless or Stateful. The difference comes down to whether the widget can change over time. Understanding this distinction is key to building interactive apps.

Stateless widget

A Stateless widget is one of the two main types of widgets in Flutter that has no internal state. Once it’s built, it doesn’t change unless its parent tells it to rebuild with new data. Stateless widgets are perfect for UI elements that stay the same throughout the app’s lifecycle or only change when external data changes.

When to use a Stateless widget:

• You’re displaying static content like text, icons, or images that won’t change.
• The widget only depends on data from outside (via constructor parameters), not internal variables.
• The content might change occasionally, but only when triggered by a parent widget rebuild, not by user interaction within itself.
• You want something that’s fast to render and has minimal overhead because Flutter doesn’t track its internal changes.

Example of a Stateless widget:

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('Stateless Widget Example')), 
        body: Center( 
          child: Text( 
            'Hello, I never change!', 
            style: TextStyle(fontSize: 20), 
          ), 
        ), 
      ), 
    ); 
  } 
} 

Copy to clipboard
Copy to clipboard

Here is the output produced by this code:

No matter how often the UI rebuilds, the text remains unchanged unless the parent widget passes in new text.

Stateful widget

A Stateful widget can store and update internal state data. When this state changes, Flutter automatically rebuilds the widget so the UI matches the new data. This makes it ideal for anything interactive or dynamic.

When to use a Stateful widget:

• The widget needs to be updated based on user interaction (e.g., button presses, form inputs).
• You’re displaying data that changes over time, such as a counter, fetched API results, or a timer.
• The widget has animations or transitions that require internal tracking of values.
• You want to keep track of a temporary state, like the selected tab or the current value of a slider.

Example of StatefulWidget:

import 'package:flutter/material.dart'; 

void main() { 
  runApp(MyApp()); 
} 


class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      home: CounterScreen(), 
    ); 
  } 
} 


class CounterScreen extends StatefulWidget {  
  @override  
  _CounterScreenState createState() => _CounterScreenState();  
} 


class _CounterScreenState extends State<CounterScreen> { 
  int _count = 0; 
  
  void _increment() { 
    setState(() { 
      _count++; 
    }); 
  } 

  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar(title: Text('Stateful Widget Example')), 
      body: Center( 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, 
          children: [ 
            Text('You pressed the button $_count times'), 
            SizedBox(height: 10), 
            ElevatedButton( 
              onPressed: _increment, 
              child: Text('Increment'), 
            ), 
          ], 
        ), 
      ), 
    ); 
  } 
} 

Copy to clipboard
Copy to clipboard

Each tap on the increment increases the counter and instantly updates the display.

With a clear understanding of Stateless and Stateful widgets, you’re ready to explore the core Flutter widgets you’ll use in almost every project.

Essential Flutter widgets you need to know

In Flutter apps, you blend a few essential Flutter widgets to build everything from basic pages to complex layouts. These key Flutter UI widgets handle structure, text, images, interactivity, and arrangement. Here’s a reference for the most common ones:

Container

The Container widget is one of the most commonly used Flutter widgets, acting like a versatile box. It can hold a single child widget and lets you apply styling such as padding, margin, background color, borders, and even transforms.

Use Container to group a widget with specific styling, spacing, or size constraints. It’s perfect for wrapping elements to control their look and placement. Here is an example:

import 'package:flutter/material.dart'; 

void main() { 
  runApp(const MyApp()); 
} 

class MyApp extends StatelessWidget { 
  const MyApp({super.key}); 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      home: Scaffold( 
        body: Center( 
          child: Container( 
            padding: const EdgeInsets.all(20), 
            margin: const EdgeInsets.all(30), 
            color: Colors.blue, 
            child: const Text( 
              'Hello Container', 
              style: TextStyle(color: Colors.white, fontSize: 20), 
            ), 
          ), 
        ), 
      ), 
    ); 
  } 
} 

Copy to clipboard
Copy to clipboard

This code produces an output as follows:

In this code:

• padding: Space inside the container, around the child widget.
• margin: Space outside the container, separating it from other widgets.
• color: Background color of the container.
• child: The widget inside the container (here, a Text widget).

Text

Text displays a string of text on the screen. It supports different styles, fonts, and alignments. Use Text to show readable content, labels, titles, or instructions. An example of Text is as follows:

Text( 
  'Hello Flutter!', 
  style: TextStyle(fontSize: 24, color: Colors.purple, fontWeight: FontWeight.bold 
) 

Copy to clipboard
Copy to clipboard

Here’s the output produced by this code:

Here:

• style: Allows font size, color, and weight customization.
• Center: Places the text in the center of the screen.

Scaffold

Scaffold provides a basic app layout structure. It can have an AppBar, a body, floating action buttons, and more. Use Scaffold to create a standard app screen with a top bar, body, and other common UI elements. An example of Scaffold is:

Scaffold( 
  appBar: AppBar(title: const Text('Scaffold Example')), 
  body: const Center( 
    child: Text('This is the body area'), 
  ), 

  floatingActionButton: FloatingActionButton( 
    onPressed: () {}, 
    child: const Icon(Icons.add), 
  ), 
) 

Copy to clipboard
Copy to clipboard

The output of this code is:

Here:

• appBar: Top navigation area.
• body: Main content area.
• floatingActionButton: Circular button that floats above the UI.

AppBar

AppBar is a toolbar typically placed at the top of the screen. It can display titles, icons, and actions. Use AppBar when you need navigation, branding, or quick actions at the top of your screen. For example:

AppBar( 
  title: Text('Dashboard'), 
  actions: [ 
    IconButton( 
      icon: Icon(Icons.search), 
      onPressed: () {}, 
    ),
  ],
),

Copy to clipboard
Copy to clipboard

The output here is:

In this code:

• title: The main label in the AppBar.
• actions: List of action buttons (e.g., search).

Row and column

Row arranges widgets horizontally, while Column arranges them vertically. Use Row for horizontal layouts and Column for vertical layouts.

Here’s an example:

Column( 
  mainAxisAlignment: MainAxisAlignment.center, 
  children: [ 
    Container( 
      padding: const EdgeInsets.all(8), 
      decoration: BoxDecoration( 
        border: Border.all(color: Colors.red, width: 2), 
        borderRadius: BorderRadius.circular(8), 
      ), 

      child: Row( 
        mainAxisAlignment: MainAxisAlignment.center, 
        children: const [ 
          Icon(Icons.star, color: Colors.yellow), 
          SizedBox(width: 10), 
          Text('Star Row'), 
        ], 
      ), 
    ), 

    const SizedBox(height: 20), 
    const Text('This is a column item'), 
  ], 
) 

Copy to clipboard
Copy to clipboard

The output generated by this is:

Here:

• mainAxisAlignment: Controls alignment along the main axis (horizontal for Row, vertical for Column).

• SizedBox: Adds spacing between widgets.

Image

The Image widget displays images from assets, the network, or memory. Use Image to show pictures, icons, or any visual content from your app’s resources or the web. For example:

Image.network( 
  'https://example.png', 
  width: 100, 
  height: 100, 
) 

Copy to clipboard
Copy to clipboard

Here:

• Image.network loads an image from a URL.
• width and height set the image size.

Icon

The Icon widget displays material design icons from the built-in icon library. Use Icon to visually represent actions, statuses, or categories. Here’s an example of Icon:

Icon( 
  Icons.favorite, 
  color: Colors.red, 
  size: 60, 
) 

Copy to clipboard
Copy to clipboard

The output produced by this is:

For this code:

• Icons.favorite: Predefined Material icon.
• color: Sets the icon color.
• size: Sets icon size in pixels.

By now, you’ve seen how these essential Flutter widgets work and when to use them. With these building blocks, you can design interfaces that are both functional and visually engaging.

Conclusion

Understanding Flutter widgets and their system gives you a unified way to design, structure, and control every part of your app’s interface. We explored what widgets are, the difference between Stateless and Stateful widgets, and essential widgets like Container, Text, Scaffold, and more, along with examples. With these fundamentals, you’re ready to start building layouts that are both visually appealing and responsive to user interaction.

If you want to go deeper and put these concepts into practice, check out Codecademy’s Intro to Flutter course

Frequently asked questions

1. What is the function of widgets in Flutter?

Widgets define how your app looks and behaves. They handle everything from displaying text and images to managing user interactions and app layout.

2. Is everything in Flutter a widget?

Yes. In Flutter, almost everything from text and images to layouts and even the app itself is built as a widget.

3. What is the main purpose of using a form widget in Flutter?

A form widget is used to group and manage multiple form fields, making it easier to validate and save user input.

4. Is Drawer a widget in Flutter?

Yes. The Drawer widget is used to create a side navigation panel that slides in from the left (or right) edge of the screen.

5. What is the leading widget in Flutter?

In widgets like AppBar, the leading widget appears at the start of the bar, often used for navigation icons, such as a back arrow or menu button.