10 Widgets Every Flutter Developer Must Master

A Comprehensive Guide to Flutter Widgets for Building Amazing UIs

Introduction:

Flutter provides a vast array of widgets that allow developers to build beautiful and functional user interfaces. As a beginner in Flutter, it can be overwhelming to decide which widgets to use and how to use them effectively. In this article, we’ll discuss ten essential widgets every Flutter developer must master, along with examples and tips on how to use them.

1. Text Widget:

The Text widget is one of the most basic widgets in Flutter, but it’s essential for building any user interface. It’s used to display text on the screen and supports various properties like font size, style, and color. You can also use it to display dynamic text using string interpolation.

Example:

Text(
  'Welcome to my Flutter App',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

2. Container Widget:

The Container widget is a versatile widget that allows you to add padding, margins, and borders to your UI. It’s like a box that can contain other widgets and apply styling to them. You can use it to add colors, images, and gradients to your UI.

Example:

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'This is a Container Widget',
    style: TextStyle(color: Colors.white),
  ),
)

3. Row Widget:

The Row widget is used to display widgets in a horizontal layout. It’s a useful widget for building a row of buttons, icons, or any other widgets. You can also use it to align widgets horizontally within a parent widget.

Example:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.email),
    SizedBox(width: 10),
    Text('Email'),
  ],
)

4. Column Widget:

The Column widget is used to display widgets in a vertical layout. It’s like the Row widget but arranged vertically. You can use it to build a column of cards, images, or any other widgets. You can also use it to align widgets vertically within a parent widget.

Example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.phone),
    SizedBox(height: 10),
    Text('Phone'),
  ],
)

5. Image Widget:

The Image widget is used to display images in your UI. You can load images from a local asset or from a network URL. You can also add placeholder images and apply styling to the image widget.

Example:

Image.asset(
  'assets/images/profile.png',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

6. ListView Widget:

The ListView widget is used to display a list of widgets in a scrollable view. It’s a useful widget for building a list of items like contacts, messages, or any other items. You can also use it to add separators between items and handle user interactions.

Example:

ListView.separated(
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('Contact $index'),
      subtitle: Text('This is a subtitle'),
      trailing: Icon(Icons.arrow_forward),
      onTap: () => print('Tapped on contact $index'),
    );
  },
  separatorBuilder: (context, index) => Divider(),
  itemCount: 10,
)

7. Scaffold Widget:

The Scaffold widget is a crucial widget in Flutter that provides a basic structure for creating an app’s layout. It is typically used as the top-level widget for a screen and provides a framework for other widgets to be added. Some of its features include:

1. App Bar: The Scaffold widget provides a built-in App Bar which can be customized to display a title, icons, and other widgets.
2. Floating Action Button: The Scaffold widget also provides a built-in Floating Action Button (FAB) which is typically used for a primary action on the screen.
3. Drawer: The Scaffold widget provides a built-in Drawer widget that can be used to display a menu or other navigation elements.
4. Bottom Navigation Bar: The Scaffold widget supports a built-in Bottom Navigation Bar which can be used to navigate between multiple screens or views.

Here is an example of how the Scaffold widget can be used:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed logic here
          },
          child: Icon(Icons.add),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text('Menu'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // Add your onTap logic here
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // Add your onTap logic here
                },
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          currentIndex: 0,
          onTap: (index) {
            // Add your onTap logic here
          },
        ),
      ),
    );
  }
}

In this example, the Scaffold widget is used as the top-level widget for the app’s home screen. It includes an App Bar, a body that contains a single text widget, a Floating Action Button, a Drawer, and a Bottom Navigation Bar. All of these widgets are provided by the Scaffold widget, making it a versatile widget.

8. Flexible Widget

The Flexible widget is used to create flexible layouts where one widget can take up as much space as possible while other widgets shrink to accommodate the remaining space. It is often used in combination with the Expanded widget to create responsive layouts.

Here is an example of how to use the Flexible widget:

Row(
  children: <Widget>[
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
  ],
)

In this example, the first Container takes up two-thirds of the available space, while the second Container takes up one-third of the available space.

9. StreamBuilder Widget

The StreamBuilder widget is used to build widgets that react to data that changes over time. It takes Stream as input and rebuilds itself whenever new data is available.

Here is an example of how to use the StreamBuilder widget:

StreamBuilder(
  stream: myStream,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data);
    } else {
      return Text('No data');
    }
  },
)

In this example, the StreamBuilder takes a Stream called myStream as input and builds a Text widget that displays the data emitted by the stream. If no data is available, the StreamBuilder displays the text "No data".

10. Spacer Widget

The Spacer widget is used to create flexible spaces in Flutter layouts. It can be used to create gaps between widgets or to push widgets to one side of the screen.

Here is an example of how to use the Spacer widget:

Row(
  children: <Widget>[
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

In this example, the Spacer widget pushes the "Right" text to the right side of the screen, leaving a flexible space between the "Left" and "Right" texts.

I mentioned 10 widgets so are we done now? yes kinda, but I mentioned ListView Widget there is another simple widget ListTile, which is similar to ListView just less customizable in my opinion. as we are here let's talk about it.

Extra 1: ListTile Widget

The ListTile widget is used to create list items in Flutter. It is a combination of several other widgets, such as Container, Row, Column, Icon, and Text, all wrapped up in one convenient widget.

Here is an example of how to use the ListTile widget:

ListTile(
  leading: Icon(Icons.person),
  title: Text('John Doe'),
  subtitle: Text('Software Engineer'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {
    // do something when the list tile is tapped
  },
)

In this example, the ListTile widget displays an icon, a title, a subtitle, and another icon, all arranged in a row. When the list tile is tapped, the onTap callback is called.

You Can Also Read,

Conclusion

These ten widgets are just a small selection of the many widgets available in Flutter. By mastering these widgets, you will be well on your way to becoming a proficient Flutter developer. With these widgets in your toolbox, you can create beautiful and functional apps with ease.

Thanks for reading. Happy learning 😄

Thank you for taking the time to read my blog post. If you found it helpful, I would be deeply grateful for your support. By using my referral link for Payoneer (http://share.payoneer.com/nav/ShXg-OlCX4Izp_QxVw_Wniuf0H2SGwy-XEJMdnTuny5G-WYOuW1j41X6EaVX4hoGCUZJBR5kWg7wo_ZYIvhNAA2), you’ll not only be able to access a global payment service that empowers freelancers and entrepreneurs, but you’ll also receive a $25 bonus when you receive your first $1000 in payments. With Payoneer by your side, you can unlock a world of possibilities and take your business to new heights.

And if you’re feeling extra generous, you can show your appreciation by buying me a virtual coffee through my BuyMeACoffee link (https://www.buymeacoffee.com/sad_adnan). Your kindness and support will keep my creative juices flowing and inspire me to keep crafting quality content that’s both informative and entertaining.

As a token of my gratitude, here’s a little poem just for you:

In the digital age, we all need a friend To help us receive payments without an end Payoneer’s the name, and it’s here to stay With a referral link that can pave the way

And if you want to brighten up my day Buy me a coffee, let me shout “Hooray!” For your generosity will help me thrive And keep my creative spark alive.