Day 4: Layout and Positioning in Flutter

Sun, May 2025 19:17:06

Hello friends! Welcome back to the Flutter from Scratch series! Today we’re diving into a super important topic: Layout and Positioning. This is the foundation for building neat and user-friendly application interfaces.

In this article, we’ll learn to use several essential layout widgets such as Padding, SizedBox, Align, Center, and Expanded. We’ll also immediately practice by building a simple login screen layout. As usual, we’ll go through it slowly, casually, and in an easy-to-understand way. Let’s get started!

1. Getting to Know Layout Widgets

Before we build the login screen, let’s understand why layout is important. In Flutter, everything is a widget, including how widgets are positioned.

a. Padding

Used to add spacing inside a widget. For example, if you want some space between text or a button and the edge of the screen.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text("Hello Flutter!"),
)

b. SizedBox

Used to create space between widgets or create a box with a fixed size.

SizedBox(height: 20),

c. Align

To position a widget at a specific location, like the bottom-left or top-right corner.

Align(
  alignment: Alignment.bottomRight,
  child: Text("This is at the bottom right corner"),
)

d. Center

A widget that centers its child both horizontally and vertically.

Center(
  child: Text("Centered"),
)

e. Expanded

Used inside a Row or Column to let a widget take up the remaining available space.

Expanded(
  child: Container(color: Colors.blue),
)

2. Preparing the Login Screen

Now let’s get to the practical part. We’ll build a simple login screen that includes:

• A title in the center
• Email and password input fields
• A login button
• Some padding to avoid touching the screen edges

Here’s a rough structure of the widgets:

Scaffold(
  body: Padding(
    padding: EdgeInsets.all(24),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Login"),
        TextField(),
        TextField(),
        SizedBox(height: 20),
        ElevatedButton(...),
      ],
    ),
  ),
)

3. Coding the Login Screen

Here’s the complete example code. We’ll break it down afterwards.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Center(
              child: Text(
                'Login',
                style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(height: 40),
            TextField(
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {},
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 16),
                child: Text('Login'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. Line-by-Line Explanation

• Padding: Adds 24 pixels of padding on all sides to avoid tight spacing.
• Column: Used to stack widgets vertically.
• Center: Centers the "Login" title.
• SizedBox: Adds space between the input fields and the button.
• Expanded is not used here because the layout is simple, but could be helpful if we want the button to expand vertically.

5. Try It Yourself

Try modifying the layout:

• Add icons to the input fields
• Change the button color
• Add a "Don’t have an account? Register" text
• Use Align to position the "Register" text at the bottom
• Add a logo image at the top

You can experiment with all of these using the layout widgets we discussed earlier.

6. Conclusion

Layout is the heart of UI in Flutter. If you understand Padding, SizedBox, Align, Center, and Expanded, you’re well on your way to creating clean and responsive layouts.

Keep exploring, experimenting, and practicing. It doesn’t have to be perfect right away. What’s important is understanding how and why each widget works.

See you in Day 5 where we’ll cover Stateful Widgets and State Management. Keep up the great work with your Flutter learning!

If you have questions,  DM via Instagram @yudianmalik. Don’t forget to star the GitHub project too!

Happy coding! 🚀