Day 7: Exploring Widgets and Layouts | Flutter in 30 Days

Day 7: Exploring Widgets and Layouts | Flutter in 30 Days

Welcome to Day 7 of the Flutter series! Today, we will explore Flutter Widgets and learn how to manage Layouts effectively to create beautiful UIs. Understanding widgets and how to arrange them is essential in building an interactive, responsive, and aesthetically pleasing app.

Widgets in Flutter

Everything in Flutter is a widget! From buttons to images, layouts to text, Flutter uses widgets to build its UI.

There are two types of widgets in Flutter:

• Stateless Widgets: These are widgets that don’t change over time. Once created, they remain the same until destroyed.
• Stateful Widgets: These widgets can change dynamically as a result of user interactions or other events.

Common Widgets in Flutter

Let’s break down a few common widgets you’ll use when building apps:

Text Widget

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
)

Container Widget

Container(
  padding: EdgeInsets.all(10.0),
  margin: EdgeInsets.all(15.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2.0),
  ),
  child: Text('Container Widget'),
)

Image Widget

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

ElevatedButton Widget

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

Layouts in Flutter

Flutter uses widgets to build both simple and complex layouts. Let’s explore a few layout widgets:

Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('First Item'),
    Text('Second Item'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    ),
  ],
)

Row

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.star, color: Colors.red),
    Icon(Icons.star, color: Colors.blue),
    Icon(Icons.star, color: Colors.green),
  ],
)

Stack

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Text('Stacked Text'),
    ),
  ],
)

ListView

ListView(
  children: [
    ListTile(
      title: Text('Item 1'),
    ),
    ListTile(
      title: Text('Item 2'),
    ),
    ListTile(
      title: Text('Item 3'),
    ),
  ],
)

Combining Widgets for Layout

To build complex UIs, you combine various widgets. Here’s an example of combining multiple widgets into a layout:

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 Day 7')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Text('Flutter Widgets', style: TextStyle(fontSize: 24, color: Colors.white)),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Icon(Icons.thumb_up, color: Colors.green, size: 40),
                Icon(Icons.thumb_down, color: Colors.red, size: 40),
              ],
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Key Takeaways:

• Widgets are the building blocks of any Flutter app. Every UI element is a widget, from simple text to complex layouts.
• You can combine multiple widgets like Container, Row, Column, Stack, and ListView to create dynamic layouts.
• Flutter offers a wide range of widgets to help you design beautiful UIs effortlessly.

Stay tuned for Day 8, where we will dive deeper into Flutter Navigation!