🇾🇹Basic Layout and Styling

In Flutter, crafting a visually pleasing layout is achieved through a combination of layout and style widgets. Let’s explore how you can arrange widgets and style them.

1. Layout Widgets 📐

Layout widgets allow you to arrange other widgets on the screen. Some common layout widgets include:

• Row: Arranges widgets horizontally.

• Column: Arranges widgets vertically.

• Stack: Overlays widgets on top of each other.

• GridView: Arranges widgets in a grid.

2. Your First Layout 🎉

Let’s create a simple layout with a Column and Row widget.

Code

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('Basic Layout'),
        ),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(child: Text('Hello')),
                Expanded(child: Text('Flutter')),
                Expanded(child: Text('University!')),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Result

3. Styling Widgets 🎨

Styling is essential for creating an intuitive and attractive UI. You can style widgets using various properties like color, padding, margin, alignment, and more.

Example: Styling Text and Containers

Code

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('Styling Example'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(20),
            color: Colors.blue,
            child: Text(
              'Hello, Flutter University!',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Result

4. Using Themes 🎨

Themes allow you to define a cohesive style throughout your app.

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: TextTheme(
      displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: MyHomePage(),
);

Assignments 📝

Practice is key! Here are some exercises:

• Create a layout using Stack and GridView.

• Style a Container with a border, margin, and padding.

• Create a custom theme for your app and apply it.

• Build a layout with nested rows and columns.

Completing these assignments will give you a good grasp of basic layout and styling in Flutter. The more you experiment with different widgets and styling options, the more comfortable you'll become.

Up next, explore Basic Interactivity to make your apps respond to user input and actions!