index<--
Flutter
Tutorial by examples
Key concepts for beginners:
- Material.dart. Flutter uses the Material library "material.dart" which is the standard on mobile and the web as a visual design language. This library has a varied set of widgets.
- MaterialApp. We almost always use MaterialApp class to create fluter applications. This way we can access all other components and widgets provided by the Flutter SDK: Text Widget, Dropdownbutton Widget, AppBar Widget, Scaffold Widget, ListView Widget, StatelessWidget, StatefulWidget, IconButton Widget, TextField Widget, Padding Widget, ThemeData Widget and many more. So we can make an attractive application.
- Stateless Widget. The application I create extends Stateless Widget, so the app itself becomes a widget. A stateless widget can't change its status while running the app and because of this, its appearance and properties remain unchanged throughout its existence. The right examples will be: Text, Icon, IconButton, FloatingActionButton.
- Statefull Widget. The Statefull widget has the ability to change the way it appears on the screen in response to user interaction or if it receives data, for example, TextField, Slider, Radio, CheckBox.
- The Scaffold widget. This widget which occupies the entire screen of the phone/tablet it is used to arrange other basics widgets on the screen. In this way you can quickly create a general purpose mobile application. It offers the ability to use other widgets like drawer, SnackBar, bottomNavigationBar, AppBar, FloatingActionButton, and many more.
In Flutter everything is a widget.
Widgets are divided, by behavior, into two types - stateless (they can not change their state) and the stateful (they can change their state), also by visibility we can classify them into two types - visible and invisible.
The visible widgets are those that we can see on the screen. They take inputs from the user and give outputs.
They are Android type like:
- AlertDialog
- AppBar
- BottomNavigationBar
- ButtonBar
- checkbox
- Date and time pickers
- DropdownButton
- FlatButton
- FloatingActionButton
- IconButton
- ListTile
- PopupMenuButton
- Radio
- RaisedButton
- SimpleDialog
- slider
- switch
- TabBar
- TabBarView
- TextField, etc
- CupertinoActionSheet
- CupertinoActivityIndicator
- CupertinoAlertDialog
- CupertinoButton
- CupertinoDatePicker
- CupertinoDialog
- CupertinoDialogAction
- CupertinoFullscreenDialogTransition
- CupertinoNavigationBar
- CupertinoPageScaffold
- CupertinoPageTransition
- CupertinoPicker
- CupertinoPopupSurface
- CupertinoSlide
- CupertinoTabBar
- CupertinoTabScaffold
- CupertinoTabView
- CupertinoTextField
- CupertinoTimerPicker
Equally important are the invisible widgets, or layout widgets, which play major roles because they control the layout and appearance of the visible widgets that make up the application, like: Container, Center, Column(), Row(), ListView() Stack, etc. A special case is the Container() widget, which can belong to both categories. Because we can decorate the Container() by assigning it a color or giving it a certain shape. Also, if it does not have a border or background color it becomes just invisible and only can hosts other widgets visible inside it. We build UIs using all kind of widgets.
The main role of a widget is to provide a build() method that describes how the widget is displayed on the screen in relation to other lower-level widgets.
I present below the simplest flutter application:
//simple flutter app
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Text('Hello Hello'),
);
}
}
In general, any Flutter program starts by importing the Flutter package: import 'package:flutter/material.dart'; . Here, we imported the material.dart package. which represents Material Design, an Android-oriented design language created by Google. This package gives us the possibility of creating an Android-type visual user interface. Its components allow a reliable development working model to build Android applications according to Google specifications.
Next in the program we find the entry point of Flutter applications. This is the main() function which passes an object called MyApp as an argument the runApp function: runApp(MyApp()); . This has the effect of attaching the MyApp widget to the screen.
In the next lines we used a StatelessWidget widget for creating the UI, which doesn't maintain any state: class MyApp extends StatelessWidget . In this block, MyApp retuns a MaterialApp widget at the root level of the application and contains one important property named home. Home: It is the inner interface of the application, through which another widget, text type: Text('Hello Hello') is displayed on screen. The colon : signs that appear designate the use of named arguments.
I have modified the application below adding text styles:
//adding text styles
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Text('Hello Hello',
style: TextStyle(
fontSize: 40,
color: Colors.blue[400],
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.none)),
);
}
}
home: Text('Hello Hello',
style: TextStyle(
fontSize: 40,
color: Colors.blue[400],
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.none)
),
I present below another simple flutter application which contain a Scaffold widget with AppBarr :
//simple dart program
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('App bar'),
)));
}
}
I present below another simple flutter application which contain a Scaffold widget with AppBarr and body:
//simple dart program
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('App screen'),
),
body: Center(
child: Text(
"Hello world",
style: TextStyle(
color: Colors.blue,
fontSize: 50.0,
),
),
),
),
);
}
}
An important widget is the container that can contains several child widgets and manage them by setting their width, height, content, background color.
This is a simple container which has a blue-violet background.
//simple dart program
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
);
}
}
This is another simple container which has white text on a yellow background.
//simple container which has white text on a yellow background
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyContainerWidget(),
);
}
}
class MyContainerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Container Example"),
),
body: Container(
width: double.infinity,
height: 150.0,
color: Colors.amber,
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(35),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Text("How to set background and text color in Flutter!",
style: TextStyle(fontSize: 25,color: Colors.white)),
),
),
);
}
}
This is a simple container which has border and shadow decoration.
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 40, 11, 90);
const Color color2 = Color.fromARGB(255, 100, 200, 5);
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Container Example"),
),
body: Container(
padding: EdgeInsets.all(22),
margin: EdgeInsets.all(50),
decoration: BoxDecoration(
border: Border.all(color: color1, width: 10),
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
// color: Colors.grey,
// spreadRadius: 4,
// blurRadius: 8,
color: color2,
offset: Offset(10.0, 5.0),
),
],
),
child: Text(
"Dart is a client-optimized language for developing fast apps on any platform!",
style: TextStyle(fontSize: 22)),
),
),
);
}
}
The Column is a widget that displays its children in a vertical order. Column widget is suitable if we want multiple widgets to be positioned in a vertical column according to their order
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 212, 55, 55);
const Color color2 = Color.fromARGB(255, 93, 55, 219);
const Color color3 = Color.fromARGB(255, 55, 218, 217);
const Color color4 = Color.fromARGB(255, 55, 219, 82);
const Color color5 = Color.fromARGB(255, 170, 170, 20);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Center(
child: Column(children: [
Text(
'Dart is the programming language for Flutter, the UI toolkit for building beautiful, natively compiled mobile, web, and desktop apps from a single codebase.',
style: TextStyle(fontSize: 16, color: color1),
),
Text(
'You will write and run all the examples in DartPad, an interactive, browser-based tool that lets you play with Dart language features and core libraries. If you prefer, you can use an IDE instead, such as WebStorm, IntelliJ with the Dart plugin, or Visual Studio Code with the Dart Code extension.',
style: TextStyle(fontSize: 16, color: color2),
),
Text(
'A new DartPad instance for every set of exercises. The link below opens a fresh instance, which contains a default "Hello" example. You can continue to use the same DartPad throughout the codelab, but if you click Reset, DartPad takes you back to the default example, losing your work',
style: TextStyle(fontSize: 16, color: color3),
),
Text(
'A new DartPad instance for every set of exercises. The link below opens a fresh instance, which contains a default "Hello" example. You can continue to use the same DartPad throughout the codelab, but if you click Reset, DartPad takes you back to the default example, losing your work',
style: TextStyle(fontSize: 16, color: color4),
),
Text(
'The main() method lives at the top level. In Dart, you can define code outside of classes. Variables, functions, getters, and setters can all live outside of classes.',
style: TextStyle(fontSize: 16, color: color5),
),
])))));
}
}
This is a simple container with one vertical column which contains some text paragraphs of text displayed on a light color background.
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 212, 55, 55);
const Color color2 = Color.fromARGB(255, 93, 55, 219);
const Color color3 = Color.fromARGB(255, 55, 218, 217);
const Color color4 = Color.fromARGB(255, 55, 219, 82);
const Color color5 = Color.fromARGB(255, 170, 170, 20);
const Color colorback = Color.fromARGB(100, 240, 240, 120);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
height: double.infinity,
color: colorback,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Column(children: [
Text(
'Dart is the programming language for Flutter, the UI toolkit single codebase.',
style: TextStyle(fontSize: 16, color: color1),
),
Text(
'You will write and run all the examples in DartPad, an interactive, browser-basethe Dart Code extension.',
style: TextStyle(fontSize: 16, color: color2),
),
Text(
'a new DartPad instance for every set of exercises. The back to the default example, losing your work',
style: TextStyle(fontSize: 16, color: color3),
),
Text(
'a new DartPad instance for every set of exercises. The link bel the default example, losing your work',
style: TextStyle(fontSize: 16, color: color4),
),
Text(
'The main() method lives at the top level. In Dart, you can define code outside ve outside of classes.',
style: TextStyle(fontSize: 16, color: color5),
),
])))));
}
}
This is a simple row with three vertical columns that divide the screen width into certain percentages and display text using the flexible widget.
//row tutorial
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 212, 55, 55);
const Color color2 = Color.fromARGB(255, 93, 55, 219);
const Color color3 = Color.fromARGB(255, 55, 218, 217);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Row tutorial'),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
flex: 25, // 30%
child: Container(
height: 100,
color: color1,
alignment: Alignment.center,
// child: Column(),
)),
Flexible(
flex: 50, // 40%
child: Container(
height: 100,
padding: EdgeInsets.all(5),
color: color2,
alignment: Alignment.center,
child: Text(
"How to set background and text color in Flutter!",
style: TextStyle(fontSize: 25, color: Colors.white)),
)),
Flexible(
flex: 25, // 25%
child: Container(
height: 100,
color: color3,
alignment: Alignment.center,
// child: Column(),
))
],
),
),
),
);
}
}
This is a simple custom shape buttons row.
//custom shape buttons in a row tutorial
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: const Text('Custom buttons'),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
TextButton(
child:
Text("Visit".toUpperCase(), style: TextStyle(fontSize: 20)),
style: ButtonStyle(
padding: MaterialStateProperty.all(
EdgeInsets.all(15)),
foregroundColor:
MaterialStateProperty.all(Colors.red),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(color: Colors.red)))),
onPressed: () => null),
SizedBox(width: 10),
ElevatedButton(
child: Text("Travel".toUpperCase(),
style: TextStyle(fontSize: 20)),
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(Colors.white),
backgroundColor:
MaterialStateProperty.all(Colors.red),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)))),
onPressed: () => null)
]),
),
),
);
}
} 
These are simple custom shape buttons displayed in multiple rows.
//custom shape buttons displayed in rows
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: const Text('Custom buttons'),
),
body: Column(children: [
Row(
//ROW 1
children: [
ElevatedButton(
onPressed: () {},
child: Text('Explore', style: TextStyle(fontSize: 20)),
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
),
ElevatedButton(
onPressed: () {},
child: Text('Destination', style: TextStyle(fontSize: 20)),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), // <-- Radius
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('OK', style: TextStyle(fontSize: 20)),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(24),
),
),
],
),
Row(//ROW 2
children: [
ElevatedButton(
onPressed: () {},
child: Text('Directions', style: TextStyle(fontSize: 20)),
style: ElevatedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12)),
),
),
OutlinedButton(
onPressed: () {},
child: Text('Reservation', style: TextStyle(fontSize: 20)),
style: OutlinedButton.styleFrom(
shape: StadiumBorder(),
),
),
OutlinedButton(
onPressed: () {},
child: Text('Tickets'),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
)
]),
Row(// ROW 3
children: [
OutlinedButton(
onPressed: () {},
child: Text('OK', style: TextStyle(fontSize: 20)),
style: OutlinedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(24),
),
),
OutlinedButton(
onPressed: () {},
child: Text('Voyage', style: TextStyle(fontSize: 20)),
style: OutlinedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
)
]),
]),
),
);
}
} 
This one is a simple column with three vertical container rows that divide the screen width into certain vertical percentages and display text using the flexible widget.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Flexible in action')),
body: Column(children: [
Flexible(
flex: 1,
child: Container(
width: double.infinity,
color: Colors.teal,
alignment: Alignment.center,
child: const Text(
'20% height',
style: TextStyle(fontSize: 16),
),
),
),
Flexible(
flex: 3,
child: Container(
width: double.infinity,
color: Colors.cyanAccent,
alignment: Alignment.center,
child: const Text(
'60% height',
style: TextStyle(fontSize: 16),
),
),
),
Flexible(
flex: 1,
child: Container(
width: double.infinity,
color: Colors.deepOrange,
alignment: Alignment.center,
child: const Text(
'20% height',
style: TextStyle(fontSize: 16),
),
),
),
]),
),
);
}
}
In this example we see how to update the status in the case of a stateful widget.
//state management
import 'package:flutter/material.dart';
void main() {
print("Main method is executing.");
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("MyApp is building Widget");
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State createState() {
print("HomePage state is building.");
return _HomePage();
}
}
class _HomePage extends State {
int counter = 0;
@override
void initState() {
//inital state which is executed only on initial widget build.
print("Setting initial state of _HomePage.");
counter = 0;
super.initState();
}
@override
Widget build(BuildContext context) {
print("_HomePage widget builing.");
return Scaffold(
appBar: AppBar(
//appbar widget inside Scaffold
title: Text("Stateful Widget Example")),
floatingActionButton: FloatingActionButton(
onPressed: () {
print("--------------------");
print("button is pressed");
setState(() {
// setState to update the UI
print("Modifying State after button press.");
counter++; //during update to UI, increase counter value
});
},
child: Icon(Icons.add), //add icon on Floating button
),
body: Center(
child: Text("Counter: $counter"), //display counter value
));
}
}
This is an example of bottom navigation using the scaffold widget.
//bottom navigation
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Colors.amber,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
bottomNavigationBar: BottomNavigationBar(
//bottom navigation bar on scaffold
items: [
//items inside navigation bar
BottomNavigationBarItem(
icon: Icon(Icons.alarm_off),
label: "Alarm off",
),
BottomNavigationBarItem(
icon: Icon(Icons.alarm_add),
label: "Alarm add",
),
BottomNavigationBarItem(
icon: Icon(Icons.alarm_on),
label: "Alarm on",
),
//put more items here
],
),
),
);
}
}
In this example we have an appbar with a menu that opens the drawer, and also bottom navigation and floatingActionButton.
// drawer and bottom navigation
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Colors.deepOrange,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//appbar widget on Scaffold
title: Text("AppBar")),
floatingActionButton: FloatingActionButton(
//Floating action button on Scaffold
onPressed: () {},
child: Icon(Icons.movie_creation),
),
drawer: Drawer(), //drawer on scaffold, open with left menu icon
endDrawer: Drawer(), //end drawer on scaffold, open with right menu icon
bottomNavigationBar: BottomNavigationBar(
//bottom navigation bar on scaffold
items: [
BottomNavigationBarItem(
icon: Icon(Icons.dangerous),
label: "Stop",
),
BottomNavigationBarItem(
icon: Icon(Icons.slow_motion_video_outlined),
label: "Slow motion",
),
BottomNavigationBarItem(
icon: Icon(Icons.fast_rewind),
label: "fast rewind",
),
],
),
body: Center(
//content body on scaffold
child: Text("Scaffold with drawer and bottom navigation")));
}
}
In this example we see how to display shape images arranged on rows and columns.
//custom shape images displayed in rows
import 'package:flutter/material.dart';
var borderRadius = BorderRadius.circular(20); // Image border
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Custom shape images'),
),
body: Column(children: [
Row(
//ROW 1
children: [
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(2), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 28, 219, 86),
borderRadius: BorderRadius.circular(22)),
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.asset('assets/images/nature1.jpg',
fit: BoxFit.cover),
),
),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(2), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 247, 133, 4),
borderRadius: BorderRadius.circular(10)),
child: CircleAvatar(
radius: 48,
backgroundColor: Color.fromARGB(255, 255, 255, 255),
child: Padding(
padding: const EdgeInsets.all(1), // Border radius
child: ClipOval(
child: Image.asset('assets/images/nature2.jpg')),
),
),
),
],
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(2), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 245, 241, 3),
borderRadius: BorderRadius.circular(12)),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.asset('assets/images/nature3.jpg',
fit: BoxFit.cover),
),
),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(5), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 119, 185, 223),
shape: BoxShape.circle),
child: ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.asset('assets/images/nature4.jpg',
fit: BoxFit.cover),
),
),
),
]),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(8), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 186, 223, 21),
shape: BoxShape.circle),
child: ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.asset('assets/images/nature5.jpg',
fit: BoxFit.cover),
),
),
),
]),
]),
),
);
}
}
In this example we see how to layout pages/screens.
//how to layout pages/screens
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyContainerWidget(),
);
}
}
class MyContainerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text('Creating Layouts'),
backgroundColor: Color.fromARGB(255, 170, 12, 12),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () {},
),
actions: [
IconButton(
icon: Icon(
Icons.more,
color: Colors.white,
),
onPressed: () {},
),
],
),
body: ListView(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 10.0,
),
Text(
'Training'.toUpperCase(),
style: TextStyle(
color: Colors.red,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5.0,
),
Text(
'This page shows you how to use the major features in Dart’s core libraries.',
style: TextStyle(
fontSize: 28,
color: Colors.blue[400],
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
// textAlign: TextAlign.justify,
decoration: TextDecoration.none),
),
SizedBox(
height: 10.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Published today',
style: TextStyle(
color: Colors.grey,
),
),
Text(
'30, August 2022',
style: TextStyle(
color: Colors.grey,
),
),
],
),
],
),
),
SizedBox(
height: 1.0,
),
////////// image
Container(
margin: EdgeInsets.only(left: 20, top: 0, right: 20, bottom: 0),
padding: EdgeInsets.all(5), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 186, 223, 21),
shape: BoxShape.rectangle),
child:
Image.asset('assets/images/nature5.jpg', fit: BoxFit.cover),
),
SizedBox(
height: 5.0,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Text(
'Use the toString() method to convert an int or double to a string. To specify the number of digits to the right of the decimal, use toStringAsFixed(). To specify the number of significant digits in the string, use toStringAsPrecision()',
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.normal,
decoration: TextDecoration.none),
),
SizedBox(
height: 10.0,
),
Text(
'In many cases, you want to work with Unicode grapheme clusters as opposed to pure code units. These are characters as they are perceived by the user (for example, “🇬🇧” is one user-perceived character but several UTF-16 code units). For this, the Dart team provides the characters package. These methods don’t work for every language. For example, the Turkish alphabet’s dotless I is converted incorrectly.Strings are immutable objects, which means you can create them but you can’t change them. If you look closely at the String API reference, you’ll notice that none of the methods actually changes the state of a String. For example, the method replaceAll() returns a new String without changing the original String:',
style: TextStyle(height: 1.5),
),
SizedBox(
height: 10.0,
),
Text(
'n many cases, you don\’t need to explicitly specify generic types, because Dart will infer them for you. A list like is understood to be a List (read: list of strings).But there are times when you should specify the generic type. Like, for example, when Dart doesn’t have anything to infer from: [] could be a list of any combination of things. That’s often not what you want, so you write [] or [] or something similar.',
style: TextStyle(height: 1.5),
),
]),
)
],
),
),
);
}
} 
In this example we have a complete navigation example with three screens.
//complete navigation example with three screens
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 55, 218, 217);
const Color color2 = Color.fromARGB(255, 212, 55, 55);
const Color color3 = Color.fromARGB(255, 93, 55, 219);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation',
home: Navigation(),
);
}
}
class Navigation extends StatefulWidget {
@override
_NavigationState createState() => _NavigationState();
}
class _NavigationState extends State {
int _selectedIndex = 0;
List _widgetOptions = [Music(), Video(), Photo()];
void _onItemTap(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Navigation App example'),
),
body: IndexedStack(
index: _selectedIndex,
children: _widgetOptions,
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.music_note,size: 50,color: Colors.blue,
),
label: 'Music'),
BottomNavigationBarItem(
icon: Icon(
Icons.music_video,size: 50,color: Colors.blue,
),
label: 'Video'),
BottomNavigationBarItem(
icon: Icon(
Icons.camera_alt,size: 50,color: Colors.blue,
),
label: 'Photo'),
],
currentIndex: _selectedIndex,
onTap: _onItemTap,
),
);
}
}
class Music extends StatefulWidget {
@override
_MusicState createState() => _MusicState();
}
class _MusicState extends State {
void initState() {
super.initState();
print('Calling initState for Music');
}
@override
Widget build(BuildContext context) {
return Container(
color:color1,
child: Center(
child: Text('Music'),
),
);
}
}
class Video extends StatefulWidget {
@override
_VideoState createState() => _VideoState();
}
class _VideoState extends State 
This is an animation example with SingleTickerProviderStateMixin.
//animation example
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(AnimatedContainerApp());
class AnimatedContainerApp extends StatefulWidget {
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
class _AnimatedContainerAppState extends State
with SingleTickerProviderStateMixin {
double _width = 100;
double _height = 100;
Color _color = Colors.deepOrangeAccent;
BorderRadiusGeometry _borderRadius = BorderRadius.circular(100.0);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
color: Colors.blueAccent,
child: Center(
child: AnimatedContainer(
width: _width,
height: _height,
decoration: BoxDecoration(
borderRadius: _borderRadius,
color: _color,
),
duration: const Duration(seconds: 1),
curve: Curves.elasticOut,
),
)),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.play_arrow),
onPressed: () {
setState(() {
final random = Random();
_width = random.nextInt(420).toDouble();
_height = random.nextInt(420).toDouble();
_color = Color.fromRGBO(random.nextInt(256), random.nextInt(256),
random.nextInt(256), 1);
_borderRadius = BorderRadius.circular(
random.nextInt(120).toDouble(),
);
});
},
),
),
);
}
}
This is a nice buttons example using iconButtons.
//nice buttons example
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 212, 55, 55);
const Color color2 = Color.fromARGB(255, 93, 55, 219);
const Color color3 = Color.fromARGB(255, 55, 218, 217);
const Color color4 = Color.fromARGB(255, 55, 55, 217);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the app root.
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter buttons',
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example iconButtons use'),
elevation: 0.0,
backgroundColor: Colors.deepOrange,
leading: const Icon(Icons.backspace),
actions: [
IconButton(
icon: const Icon(Icons.location_on),
onPressed: () => {},
),
const IconButton(
icon: Icon(Icons.ac_unit),
onPressed: null,
),
],
),
body: ListView(
children: [
Column(
children: [
SizedBox(
height: 25,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(5), // Border width
decoration:
BoxDecoration(color: color1, shape: BoxShape.circle),
child: IconButton(
icon: const Icon(
Icons.streetview_outlined,
color: Colors.white,
),
onPressed: () {
// print('i was pressed (Street)');
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("you've clicked on first"),
));
},
),
),
Container(
padding: EdgeInsets.all(5), // Border width
decoration: BoxDecoration(
color: Color.fromARGB(255, 186, 223, 21),
shape: BoxShape.circle),
child: IconButton(
icon: const Icon(
Icons.local_florist,
color: Colors.blue,
semanticLabel: 'Flowers',
),
onPressed: () {
// print('i was pressed (Florist)');
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("you've clicked on second"),
));
},
),
),
Container(
padding: EdgeInsets.all(5), // Border width
decoration:
BoxDecoration(color: color3, shape: BoxShape.circle),
child: IconButton(
icon: const Icon(
Icons.no_food_rounded,
color: Colors.indigo,
semanticLabel: 'Food',
),
onPressed: () {
// print('i was pressed (Food)');
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("you've clicked on third"),
));
},
),
),
Container(
padding: EdgeInsets.all(5), // Border width
decoration:
BoxDecoration(color: color4, shape: BoxShape.circle),
child: IconButton(
icon: const Icon(
Icons.fit_screen_sharp,
color: Colors.white,
semanticLabel: 'Screen',
),
onPressed: () {
// print('i was pressed (Screen)');
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("you've clicked on fourth"),
));
},
),
),
],
),
const SizedBox(
height: 40.0,
),
],
),
],
));
}
}
This is a symbols use example using icons.
//symbols use example
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 212, 55, 55);
const Color color2 = Color.fromARGB(255, 93, 55, 219);
const Color color3 = Color.fromARGB(255, 55, 218, 217);
const Color color4 = Color.fromARGB(255, 219, 55, 90);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter examples',
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example symbols use'),
elevation: 0.0,
backgroundColor: Colors.deepOrange,
leading: const Icon(Icons.backspace),
actions: [
IconButton(
icon: const Icon(Icons.location_on),
onPressed: () => {},
),
const IconButton(
icon: Icon(Icons.ac_unit),
onPressed: null,
),
],
),
body: ListView(
children: [
Column(
children: [
const SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.model_training,
color: color1,
size: 50.0,
semanticLabel: 'Model training',
),
Icon(
Icons.house_outlined,
color: color2,
size: 50.0,
semanticLabel: 'House',
),
Icon(
Icons.one_k_plus_sharp,
color: color3,
size: 50.0,
semanticLabel: 'one k',
),
Icon(
Icons.notification_important_outlined,
color: color4,
size: 50.0,
semanticLabel: 'notification',
),
],
),
],
),
],
));
}
}
This is a text overflow example using ellipsis.
//text overflow example using ellipsis
import 'package:flutter/material.dart';
const Color light = Color.fromARGB(255, 255, 255, 255);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: light,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Flexible(
child: Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
// padding: EdgeInsets.only(right: 13.0),
child: Text(
'This line of text is very very long',
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 23.0,
fontFamily: 'Roboto',
color: Color(0xFF0000ff),
fontWeight: FontWeight.normal,
),
),
decoration: BoxDecoration(
color: Color.fromARGB(255, 255, 255, 255),
border: Border.all(color: Colors.orange)),
))
],
),
));
}
}
This is a more complex text overflow example using ellipsis.
//text overflow example using ellipsis
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: const Text('Overflow text example'),
),
body: ListView(children: [
Column(children: [
Row(
//ROW 1
children: [
Container(
width: 100.0,
height: 100.0,
color: Colors.amber,
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(5),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Text("How?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Expanded(
child: Text(
"Have you made up your mind? Are you really going on a trip and you still don't know what to do here? You just found the item that brings you 10 sights to visit – and love! – on your trip to this marvellous lands! It is, of course, that there are sensational places for you to visit, but these 10 are a must and undoubtedly are the best places to meet in this country.",
overflow: TextOverflow.ellipsis,
maxLines: 6,
// softWrap: false,
),
),
],
),
Row(//ROW 2
children: [
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(5),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Text("Where?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Expanded(
child: Text(
"Have you made up your mind? Are you really going on a trip and you still don't know what to do here? You just found the item that brings you 10 sights to visit – and love! – on your trip to this marvellous lands! ",
overflow: TextOverflow.ellipsis,
maxLines: 6,
// softWrap: false,
),
),
]),
Row(// ROW 3
children: [
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(5),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Text("When?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Expanded(
child: Text(
"Have you made up your mind? Are you really going on a trip and you still don't know what to do here? You just found the item that brings you 10 sights to visit – and love! – on your trip to this marvellous lands!",
overflow: TextOverflow.ellipsis,
maxLines: 6,
// softWrap: false,
),
)
]),
])
]),
),
);
}
}
This is a login form example.
//a login form example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const appTitle = 'Form Validation';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(
appTitle,
),
backgroundColor: Colors.red,
),
body: const MyCustomForm(),
),
);
}
}
// Create a Form widget.
class MyCustomForm extends StatefulWidget {
const MyCustomForm({Key? key}) : super(key: key);
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey,
// not a GlobalKey.
final _formKey = GlobalKey();
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row( //Row 1
children: [
Container(
width: 100.0,
color: Colors.amber,
// margin: EdgeInsets.all(25),
padding: EdgeInsets.all(5),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Text("Username", style: TextStyle(color: Colors.white)),
),
Expanded(
child: TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter here some text too';
}
return null;
},
),
),
],
),
Row(//Row 2
children: [
Container(
width: 100.0,
// height: 100.0,
color: Colors.red,
// margin: EdgeInsets.all(25),
padding: EdgeInsets.all(5),
alignment: Alignment.center,
// transform: Matrix4.rotationZ(0.1),
child: Text("Password", style: TextStyle(color: Colors.white)),
),
Expanded(
child: TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter here some text too';
}
return null;
},
),
),
]),
Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: ElevatedButton(
child: Text(
"Login",
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.white),
backgroundColor: MaterialStateProperty.all(Colors.red),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(color: Colors.amber)))),
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState!.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Sending data ...')),
);
}
},
),
),
],
),
);
}
} 
This is a two screens navigation example.
//a two screens navigation example
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
const FirstRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First screen'),
backgroundColor: Colors.indigo,
elevation: 0.0,
),
body: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
OutlinedButton(
onPressed: () {
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
}
},
child: Text('Continue',
style: TextStyle(fontSize: 20, color: Colors.indigo)),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
]),
);
}
}
class SecondRoute extends StatelessWidget {
const SecondRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second screen'),
backgroundColor: Colors.red,
elevation: 0.0,
),
body: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
OutlinedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back',
style: TextStyle(fontSize: 20, color: Colors.red)),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
]),
);
}
}
This is a horizontal list example.
//a horizontal list example
import 'package:flutter/material.dart';
const Color color1 = Color.fromARGB(255, 212, 55, 55);
const Color color2 = Color.fromARGB(255, 93, 55, 219);
const Color color3 = Color.fromARGB(255, 55, 218, 217);
const Color color4 = Color.fromARGB(255, 219, 55, 90);
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'Horizontal List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
body: Container(
margin: const EdgeInsets.all(5.0),
height: 100.0,
child: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: [
Container(
alignment: Alignment.center,
width: 100.0,
color: color1,
child: Text("Where?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Container(
alignment: Alignment.center,
width: 100.0,
color: color2,
child: Text("How?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Container(
alignment: Alignment.center,
width: 100.0,
color: color3,
child: Text("When?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Container(
alignment: Alignment.center,
width: 100.0,
color: color4,
child: Text("What?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
Container(
alignment: Alignment.center,
width: 100.0,
color: color2,
child: Text("Why?",
style: TextStyle(fontSize: 25, color: Colors.white)),
),
],
),
),
),
);
}
} 
Back to: Dart Index