Unit 5: Basic Flutter widget

Flutter Text
import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text(
"Hello World! This is a Text Widget.",
style: TextStyle(
fontSize: 35,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
]
),
)

Shri S.V.Patel College of CS & BM Page 1

 Unit 5: Basic Flutter widget

),
);
}
}

Flutter TextField
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {

@override

Shri S.V.Patel College of CS & BM Page 2

 Unit 5: Basic Flutter widget

_State createState() => _State();

}

class _State extends State<MyApp> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Sign In'),
onPressed: (){},
)

Shri S.V.Patel College of CS & BM Page 3

 Unit 5: Basic Flutter widget

],
)
)
);
}
}

Flutter Button
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

Shri S.V.Patel College of CS & BM Page 4

 Unit 5: Basic Flutter widget

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter FlatButton Example'),
),
body: Center(child: Column(children: <Widget>[
Container(
margin: EdgeInsets.all(25),
child: FlatButton(
child: Text('SignUp', style: TextStyle(fontSize: 20.0),),
onPressed: () {},
),
),
Container(
margin: EdgeInsets.all(25),
child: FlatButton(
child: Text('LogIn', style: TextStyle(fontSize: 20.0),),
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {},
),
),
]
))
),
);
}
}

Shri S.V.Patel College of CS & BM Page 5

 Unit 5: Basic Flutter widget

Flutter Slider
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: MySliderApp(),
);
}

Shri S.V.Patel College of CS & BM Page 6

 Unit 5: Basic Flutter widget

class MySliderApp extends StatefulWidget {

MySliderApp({Key key}) : super(key: key);

@override
_MySliderAppState createState() => _MySliderAppState();
}

class _MySliderAppState extends State<MySliderApp> {

int _value = 6;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Slider Demo'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.volume_up,
size: 40,
),
new Expanded(
child: Slider(
value: _value.toDouble(),
min: 1.0,
max: 20.0,
divisions: 10,
activeColor: Colors.green,
inactiveColor: Colors.orange,
label: 'Set volume value',
onChanged: (double newValue) {
setState(() {
_value = newValue.round();
});

Shri S.V.Patel College of CS & BM Page 7

 Unit 5: Basic Flutter widget

},
semanticFormatterCallback: (double newValue) {
return '${newValue.round()} dollars';
}
)
),
]
)
),
)
);
}
}

Shri S.V.Patel College of CS & BM Page 8

 Unit 5: Basic Flutter widget

Flutter Checkbox
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp( home: MyHomePage(),));
}

class MyHomePage extends StatefulWidget {

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<MyHomePage> {

bool valuefirst = false;
bool valuesecond = false;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Checkbox Example'),),
body: Container(

child: Column(
children: <Widget>[
Row(
children: <Widget>[
SizedBox(width: 10,),
Text('Checkbox without Header and Subtitle: ',style: TextStyle(fontSize: 17.0), ),
Checkbox(
checkColor: Colors.greenAccent,
activeColor: Colors.red,
value: this.valuefirst,
onChanged: (bool value) {
setState(() {
this.valuefirst = value;
});
},

Shri S.V.Patel College of CS & BM Page 9

 Unit 5: Basic Flutter widget

),
Checkbox(
value: this.valuesecond,
onChanged: (bool value) {
setState(() {
this.valuesecond = value;
});
},
),
],
),
],
)
),
),
);
}
}

Shri S.V.Patel College of CS & BM Page 10

 Unit 5: Basic Flutter widget

Flutter Radio button

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {
static const String _title = 'Radio Button Example';

@override
Widget build(BuildContext context) {

Shri S.V.Patel College of CS & BM Page 11

 Unit 5: Basic Flutter widget

return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: Center(
child: MyStatefulWidget(),
),
),
);
}
}

enum BestTutorSite { javatpoint, w3schools, tutorialandexample }

class MyStatefulWidget extends StatefulWidget {

MyStatefulWidget({Key key}) : super(key: key);

@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

BestTutorSite _site = BestTutorSite.javatpoint;

Widget build(BuildContext context) {

return Column(
children: <Widget>[
ListTile(
title: const Text('www.javatpoint.com'),
leading: Radio(
value: BestTutorSite.javatpoint,
groupValue: _site,
onChanged: (BestTutorSite value) {
setState(() {
_site = value;
});
},
),
),
ListTile(
title: const Text('www.w3school.com'),

Shri S.V.Patel College of CS & BM Page 12

 Unit 5: Basic Flutter widget

leading: Radio(
value: BestTutorSite.w3schools,
groupValue: _site,
onChanged: (BestTutorSite value) {
setState(() {
_site = value;
});
},
),
),
ListTile(
title: const Text('www.tutorialandexample.com'),
leading: Radio(
value: BestTutorSite.tutorialandexample,
groupValue: _site,
onChanged: (BestTutorSite value) {
setState(() {
_site = value;
});
},
),
),
],
);
}
}

Shri S.V.Patel College of CS & BM Page 13

 Unit 5: Basic Flutter widget

Flutter Progressbar
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: LinearProgressIndicatorApp(),
);
}
}

Shri S.V.Patel College of CS & BM Page 14

 Unit 5: Basic Flutter widget

class LinearProgressIndicatorApp extends StatefulWidget {

@override
State<StatefulWidget> createState() {
return LinearProgressIndicatorAppState();
}
}

class LinearProgressIndicatorAppState extends State<LinearProgressIndicatorApp> {

bool _loading;

@override
void initState() {
super.initState();
_loading = false;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Linear Progress Bar"),
),
body: Center(
child: Container(
padding: EdgeInsets.all(12.0),
child: _loading ? LinearProgressIndicator() : Text(
"Press button for downloading",
style: TextStyle(fontSize: 25)),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_loading = !_loading;
});
},
tooltip: 'Download',
child: Icon(Icons.cloud_download),
),
);

Shri S.V.Patel College of CS & BM Page 15

 Unit 5: Basic Flutter widget

}
}

Flutter List
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

Shri S.V.Patel College of CS & BM Page 16

 Unit 5: Basic Flutter widget

@override
Widget build(BuildContext context) {
final appTitle = 'Flutter Basic List Demo';

return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
ListTile(
leading: Icon(Icons.contacts),
title: Text('Contact'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Setting'),
),
],
),
),
);
}
}

Shri S.V.Patel College of CS & BM Page 17

 Unit 5: Basic Flutter widget

Flutter form
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
final appTitle = 'Flutter Form Demo';
return MaterialApp(
title: appTitle,

Shri S.V.Patel College of CS & BM Page 18

 Unit 5: Basic Flutter widget

home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: MyCustomForm(),
),
);
}
}
// Create a Form widget.
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class. This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your name',
labelText: 'Name',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.phone),
hintText: 'Enter a phone number',

Shri S.V.Patel College of CS & BM Page 19

 Unit 5: Basic Flutter widget

labelText: 'Phone',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.calendar_today),
hintText: 'Enter your date of birth',
labelText: 'Dob',
),
),
new Container(
padding: const EdgeInsets.only(left: 150.0, top: 40.0),
child: new RaisedButton(
child: const Text('Submit'),
onPressed: null,
)),
],
),
);
}
}

Shri S.V.Patel College of CS & BM Page 20

 Unit 5: Basic Flutter widget

Flutter Stack
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: MyStackWidget(),
);
}
}

Shri S.V.Patel College of CS & BM Page 21

 Unit 5: Basic Flutter widget

class MyStackWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Stack Widget Example"),
),
body: Center(
child: Stack(
fit: StackFit.passthrough,
overflow: Overflow.visible,
children: <Widget>[
// Max Size Widget
Container(
height: 300,
width: 400,
color: Colors.green,
child: Center(
child: Text(
'Top Widget: Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
height: 100,
width: 150,
color: Colors.blue,
child: Center(
child: Text(
'Middle Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),

Shri S.V.Patel College of CS & BM Page 22

 Unit 5: Basic Flutter widget

Positioned(
top: 30,
left: 20,
child: Container(
height: 100,
width: 150,
color: Colors.orange,
child: Center(
child: Text(
'Bottom Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
)
),
],
),
)
),
);
}
}

Shri S.V.Patel College of CS & BM Page 23

 Unit 5: Basic Flutter widget

Flutter Alert Dialog box

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
final appTitle = 'Flutter Basic Alert Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(

Shri S.V.Patel College of CS & BM Page 24

 Unit 5: Basic Flutter widget

title: Text(appTitle),
),
body: MyAlert(),
),
);
}
}

class MyAlert extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: RaisedButton(
child: Text('Show alert'),
onPressed: () {
showAlertDialog(context);
},
),
);
}
}

showAlertDialog(BuildContext context) {
// Create button
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
);

// Create AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Simple Alert"),
content: Text("This is an alert message."),
actions: [
okButton,
],
);

Shri S.V.Patel College of CS & BM Page 25

 Unit 5: Basic Flutter widget

// show the dialog

showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}

Flutter Tooltip
import 'package:flutter/material.dart';

void main() {runApp(MyApp());}

Shri S.V.Patel College of CS & BM Page 26

 Unit 5: Basic Flutter widget

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Tooltip Example"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
Container(
margin: EdgeInsets.all(10),
child: Tooltip(
waitDuration: Duration(seconds: 1),
showDuration: Duration(seconds: 2),
padding: EdgeInsets.all(5),
height: 35,
textStyle: TextStyle(
fontSize: 15, color: Colors.white, fontWeight: FontWeight.normal),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), color: Colors.green),
message: 'My Account',
child: FlatButton(
child: Icon(
Icons.account_box,
size: 100,

Shri S.V.Patel College of CS & BM Page 27

 Unit 5: Basic Flutter widget

),
)),
),
Container(
margin: EdgeInsets.all(10),
child: Tooltip(
message: 'My Account',
child: FlatButton(
child: Icon(
Icons.account_box,
size: 100,
),
)
),
)
]
),
);
}
}

Shri S.V.Patel College of CS & BM Page 28

 Unit 5: Basic Flutter widget

If we long-press the icon, we will see the tooltip as below screenshot.

Shri S.V.Patel College of CS & BM Page 29

 Unit 5: Basic Flutter widget

Flutter Toast
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class ToastExample extends StatefulWidget {

@override
_ToastExampleState createState() {
return _ToastExampleState();
}
}

class _ToastExampleState extends State {

Shri S.V.Patel College of CS & BM Page 30

 Unit 5: Basic Flutter widget

void showToast() {
Fluttertoast.showToast(
msg: 'This is toast notification',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIos: 1,
backgroundColor: Colors.red,
textColor: Colors.yellow
);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Toast Notification Example',
home: Scaffold(
appBar: AppBar(
title: Text('Toast Notification Example'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: RaisedButton(
child: Text('click to show'),
onPressed: showToast,
),
),
)
),
);
}
}

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

Shri S.V.Patel College of CS & BM Page 31

 Unit 5: Basic Flutter widget

When we click on the "click to show" button, we can see the toast message at the bottom of the screen.
See the below image:

Shri S.V.Patel College of CS & BM Page 32

 Unit 5: Basic Flutter widget

Flutter Switch
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(

Shri S.V.Patel College of CS & BM Page 33

 Unit 5: Basic Flutter widget

backgroundColor: Colors.blue,
title: Text("Flutter Switch Example"),
),
body: Center(
child: SwitchScreen()
),
)
);
}
}

class SwitchScreen extends StatefulWidget {

@override
SwitchClass createState() => new SwitchClass();
}

class SwitchClass extends State {

bool isSwitched = false;
var textValue = 'Switch is OFF';

void toggleSwitch(bool value) {

if(isSwitched == false)
{
setState(() {
isSwitched = true;
textValue = 'Switch Button is ON';
});
print('Switch Button is ON');
}
else
{
setState(() {
isSwitched = false;
textValue = 'Switch Button is OFF';
});
print('Switch Button is OFF');
}
}
@override
Widget build(BuildContext context) {

Shri S.V.Patel College of CS & BM Page 34

 Unit 5: Basic Flutter widget

return Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[ Transform.scale(
scale: 2,
child: Switch(
onChanged: toggleSwitch,
value: isSwitched,
activeColor: Colors.blue,
activeTrackColor: Colors.yellow,
inactiveThumbColor: Colors.redAccent,
inactiveTrackColor: Colors.orange,
)
),
Text('$textValue', style: TextStyle(fontSize: 20),)
]);
}
}

Shri S.V.Patel College of CS & BM Page 35

 Unit 5: Basic Flutter widget

If we press on the switch, it will change their state from OFF to ON. See the below screenshot:

Shri S.V.Patel College of CS & BM Page 36

 Unit 5: Basic Flutter widget

Flutter Chart
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(

Shri S.V.Patel College of CS & BM Page 37

 Unit 5: Basic Flutter widget

home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Chart Example'),
backgroundColor: Colors.green
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LineCharts(),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Traffic Source Chart",
style: TextStyle(
fontSize: 20,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic
)
)
),
],
),
),
);
}
}

class LineCharts extends StatelessWidget {

@override
Widget build(BuildContext context) {
const cutOffYValue = 0.0;

Shri S.V.Patel College of CS & BM Page 38

 Unit 5: Basic Flutter widget

const yearTextStyle =
TextStyle(fontSize: 12, color: Colors.black);

return SizedBox(
width: 360,
height: 250,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: false),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 1),
FlSpot(1, 1),
FlSpot(2, 3),
FlSpot(3, 4),
FlSpot(3, 5),
FlSpot(4, 4)
],
isCurved: true,
barWidth: 2,
colors: [
Colors.black,
],
belowBarData: BarAreaData(
show: true,
colors: [Colors.lightBlue.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.lightGreen.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
dotData: FlDotData(
show: false,
),
),
],

Shri S.V.Patel College of CS & BM Page 39

 Unit 5: Basic Flutter widget

minY: 0,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 5,
textStyle: yearTextStyle,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2016';
case 1:
return '2017';
case 2:
return '2018';
case 3:
return '2019';
case 4:
return '2020';
default:
return '';
}
}),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return '\$ ${value + 100}';
},
),
),
axisTitleData: FlAxisTitleData(
leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10),
bottomTitle: AxisTitle(
showTitle: true,
margin: 10,
titleText: 'Year',
textStyle: yearTextStyle,
textAlign: TextAlign.right)),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (double value) {
return value == 1 || value == 2 || value == 3 || value == 4;

Shri S.V.Patel College of CS & BM Page 40

 Unit 5: Basic Flutter widget

},
),
),
),
);
}
}

Shri S.V.Patel College of CS & BM Page 41