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
