Flutter : Widget

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.