Obafemi Emmanuel

Flutter is a UI toolkit that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. One of its key strengths is its widget-based approach to UI design. In this blog, we will explore different aspects of UI and layouts in Flutter, covering widgets, layout structures, and interactive components.

3.1 Introduction to Widgets

Widgets are the building blocks of a Flutter application. Everything in Flutter, from structural elements (like buttons and text fields) to styling elements (like padding and themes), is a widget.

Types of Widgets

1. StatelessWidget – Represents widgets that do not change dynamically. Example: Text, Icon, Container.
2. StatefulWidget – Represents widgets that maintain internal state and can update dynamically. Example: TextField, Checkbox, ListView.

Flutter follows a composition over inheritance approach, meaning complex UIs are built by composing smaller widgets.

3.2 Column, Row, Stack & Container

Column & Row

• Column arranges widgets vertically.
• Row arranges widgets horizontally.
• Both provide properties like mainAxisAlignment and crossAxisAlignment to control alignment.

Example:

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

Stack

• The Stack widget overlays widgets on top of each other.
• It uses the Positioned widget to place child widgets at specific locations.

Example:

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(top: 50, left: 50, child: Icon(Icons.star, size: 50, color: Colors.white))
  ],
)

Container

• The Container widget is a fundamental building block that allows adding padding, margin, decoration, and transformations.

Example:

Container(
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.circular(10)),
  child: Text('Hello, Flutter!'),
)

3.3 ListView & GridView

ListView

• ListView is used to display a scrollable list of widgets.
• Can be defined statically or dynamically with ListView.builder().

Example:

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item \$index'));
  },
)

GridView

• GridView is used for displaying widgets in a grid pattern.
• Can be defined statically or dynamically with GridView.builder().

Example:

GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Card(child: Center(child: Text('Grid Item \$index')));
  }),
)

3.4 Forms & Input Fields

Forms in Flutter are built using the Form widget, which groups multiple input fields together.

Example:

final _formKey = GlobalKey<FormState>();
TextEditingController _controller = TextEditingController();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _controller,
        decoration: InputDecoration(labelText: 'Enter text'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter some text';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Valid input: \${_controller.text}');
          }
        },
        child: Text('Submit'),
      )
    ],
  ),
)

3.5 Buttons, Dialogs & Alerts

Buttons

Flutter provides various types of buttons:

1. ElevatedButton – A raised button with elevation.
2. TextButton – A simple text button without elevation.
3. OutlinedButton – A button with an outlined border.

Example:

ElevatedButton(
  onPressed: () {
    print('Button pressed');
  },
  child: Text('Click Me'),
)

Dialogs & Alerts

Dialogs and alerts help in displaying messages or prompts.

Show AlertDialog Example:

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is an alert message.'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('OK'),
        )
      ],
    );
  },
);

Full Example Code

Here is a complete Flutter application demonstrating all the concepts discussed:

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('Flutter UI & Layouts')),
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Hello'),
                    content: Text('This is a sample dialog'),
                    actions: [TextButton(onPressed: () => Navigator.pop(context), child: Text('OK'))],
                  ),
                );
              },
              child: Text('Show Dialog'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: 5,
                itemBuilder: (context, index) => ListTile(title: Text('Item \$index')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

Understanding and effectively using UI and layouts in Flutter is essential for creating responsive and visually appealing applications. Widgets like Column, Row, Stack, ListView, and GridView allow developers to structure UI elements efficiently, while buttons, dialogs, and forms add interactivity. Mastering these concepts will enable you to build dynamic and user-friendly Flutter apps.