Hello friends, In today’s tutorial we would learn about the Align widget of flutter. Flutter provides us a individual widget to set alignment of our widgets. All we have to do is wrap the child widget into Align widget and set the alignment using its property and you see the magic. The align widget has 9 different properties. We will discuss them later in this tutorial. So in this tutorial we would learn about Flutter Place Widget at Bottom of Screen.
Contents in this project Flutter Place Widget at Bottom of Screen :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call MyApp component.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating a function named as onClick(). We would call this function on button click event.
|
1 2 3 |
onClick() { print('Button Clicked'); } |
5. Creating Widget Build area -> Here we would make our main Align widget with property Alignment.bottomCenter to put the Button widget at the bottom of screen.
|
1 2 3 4 5 6 7 8 9 10 |
Align( alignment: Alignment.bottomCenter, child: RaisedButton( onPressed: () => onClick(), child: const Text('Sample Button'), textColor: Colors.white, color: Colors.green, padding: const EdgeInsets.fromLTRB(10, 10, 10, 10), ), ) |
6. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { onClick() { print('Button Clicked'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Place Widget at Bottom of Screen'), ), body: Center( child: Align( alignment: Alignment.bottomCenter, child: RaisedButton( onPressed: () => onClick(), child: const Text('Sample Button'), textColor: Colors.white, color: Colors.green, padding: const EdgeInsets.fromLTRB(10, 10, 10, 10), ), )), ), ); } } |
Screenshot :-
