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('Simple UI Layout'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text(
'Header',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
child: Center(
child: Text(
'Box 1',
style: TextStyle(color: Colors.white),
),
),
),
Container(
width: 100,
height: 100,
color: Colors.green,
child: Center(
child: Text(
'Box 2',
style: TextStyle(color: Colors.white),
),
),
),
],
),
SizedBox(height: 20),
Expanded(
child: Container(
color: Colors.orange,
child: Center(
child: Text(
'Footer',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
],
),
),
),
);
}
}
In this example:
- We use a Column to arrange the main sections vertically.
- A Container widget is used to style the header and footer with padding, color, and text.
- Inside the Column, a Row widget is used to place two boxes side by side.
- Expanded is used to make the footer fill the remaining space.
Resources for Further Learning- Flutter Documentation: Check out the official [Flutter Layouts Guide](
https://flutter.dev/docs/development/ui/layout) for more in-depth information.
- Flutter Widget Catalog: Explore the [Flutter Widget Catalog](
https://flutter.dev/docs/development/ui/widgets/layout) to discover all the available layout widgets and their usage examples.
That concludes Day 3 of our Flutter beginner's guide. Tomorrow, we'll focus on handling user input in Flutter. Stay tuned!
@FlutterBegin
