Flutter Fundamentals: Unwrapping the Essentials of Basic Widgets

Introduction

Flutter, Google’s UI toolkit for crafting natively compiled applications for mobile, web, and desktop from a single codebase, has gained immense popularity. At the heart of Flutter are its widgets, the building blocks of any Flutter app. Understanding these widgets is crucial for any Flutter developer. In this blog, we will unwrap the essentials of basic Flutter widgets and how to use them.

What are Widgets in Flutter?

Widgets in Flutter describe what their view should look like given their current configuration and state. When a widget’s state changes, Flutter rebuilds the widget to reflect the changes. This declarative approach to UI development makes the code more predictable and easier to manage.

Basic Flutter Widgets

Scaffold

The Scaffoldwidget is the base of the visual interface and provides a structure to the app, such as an AppBar, Drawer, BottomNavigationBar, and more.

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Demo'),
  ),
  body: Center(
    child: Text('Hello, world!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Text

The Text widget is used to display a string of text with a single style.

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

Container

The Containerwidget is a versatile widget that can contain a single child widget, and allows you to customize its appearance with padding, margin, borders, and background color.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('I am inside a container'),
)

Row and Column

Row and Column widgets are used to arrange other widgets in a horizontal and vertical manner respectively.

Row Example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children:[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Column Example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children:[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Image

The Imagewidget is used to display images in your Flutter app.

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Icons

The Iconwidget is used to display Material icons.

Icon(
  Icons.favorite,
  color: Colors.pink,
  size: 24.0,
)

Button Widgets

Buttons are used to capture user interactions and can come in various forms such as ElevatedButton, TextButton, and IconButton.

ElevatedButton Example:

ElevatedButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Elevated Button'),
)

TextButton Example:

TextButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Text Button'),
)

IconButton Example:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('Pressed');
  },
)

Conclusion

These basic widgets form the foundation of any Flutter application. By mastering these, you will be well-equipped to build more complex interfaces. Remember, Flutter’s true power lies in its widget composition, allowing you to create sophisticated UIs from simple building blocks.

Connect with Me

If you enjoyed this post and want to see more of my work, feel free to check out my GitHub and personal website:

• GitHub: eldhopaulose

• Website: Eldho Paulose