III B.tech CSE - Flutter Lab Manual
III B.tech CSE - Flutter Lab Manual
III B.tech CSE - Flutter Lab Manual
After selecting Plugins, we enter flutter as a search term in the Marketplace. We will install
the Flutter plugin. Note that this will also install the Dart plugin as it is required.
Once the plugin has finished installing, Android Studio will restart, and we will now see an
option create a Flutter app!
1
2
Week 2:
Create an application using Flutter to print hello world.
3
4
Week 3:
Create an application to implement Decision making and loops using Dart.
o If statement
o If-else statement
o Switch statement
Loops are used to execute a block of code repeatedly until a specified condition becomes true. Dart language
supports the following types of loop statements:
o for
o for..in
o while
o do..while
void main() {
if (num%2 == 0) {
print("Number is Even.");
5
import dart.io;
void main(){
var dayOfWeek = 5;
or
//print(“enter the choice”);
//int? dayOfWeek = int.parse(stdin.readLineSync()!);
if (dayOfWeek == 1) {
print("Day is Sunday.");
}
else if (dayOfWeek == 2) {
print("Day is Monday.");
}
else if (dayOfWeek == 3) {
print("Day is Tuesday.");
}
else if (dayOfWeek == 4) {
print("Day is Wednesday.");
}
else if (dayOfWeek == 5) {
print("Day is Thursday.");
}
else if (dayOfWeek == 6) {
print("Day is Friday.");
}
else if (dayOfWeek == 7) {
print("Day is Saturday.");
}else{
print("Invalid Weekday.");
}
}
Loops
1) For each loop
void main() {
6
var name = ["Peter", "Rinky Ponting", "Abhishek"];
2) For loop
void main() {
int sum=0;
for(int i=1;i<=10;i++){
sum=sum+i;
3) While loop
void main() {
int i = 1;
while (i <= 10) {
print(i);
i++;
}
}
7
4) Do..while loop
void main() {
int i = 10;
do {
print(i);
i--;
} while (i >= 1);
}
8
Week 4:
Create an application to demonstrate user defined functions using Dart.
void main(){
// Here 10 and 20 are arguments
add(10, 20);
}
9
Week 5:
Create an application to implement object oriented programming using Dart
//Constuctors
class Student {
String? name;
int? age;
int? rollNumber;
// Constructor
Student(String name, int age, int rollNumber) {
print(
"Constructor called"); // this is for checking the constructor is called or not.
this.name = name;
this.age = age;
this.rollNumber = rollNumber;
}
}
void main() {
// Here student is object of class Student.
Student student = Student("John", 20, 1);
print("Name: ${student.name}");
print("Age: ${student.age}");
print("Roll Number: ${student.rollNumber}");
}
Inheritance example
class Laptop {
// Constructor
Laptop({String name, String color}) {
print("Laptop constructor");
print("Name: $name");
print("Color: $color");
}
}
10
MacBook({String name, String color}) : super(name: name, color: color) {
print("MacBook constructor");
}
}
void main() {
var macbook = MacBook(name: "MacBook Pro", color: "Silver");
}
11
Week 6:
Create an application for platform basic widgets (Text, Image, and Icon).
import 'package:flutter/material.dart';
12
Image
import 'package:flutter/material.dart';
13
);
}
}
14
Icon
import 'package:flutter/material.dart';
15
16
Week 7:
Create an application for Layout widgets (Single child, Multiple Child).
Layout a widget
Let us learn how we can create and display a simple widget. The following steps show how to layout a
widget:
Step 4: Finally, add the layout widget to the page where you want to display.
import 'package:flutter/material.dart';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("FittedBox Widget")),
body: Center(
child: FittedBox(child: Row(
children: <Widget>[
Container(
child: Image.asset('assets/computer.png'),
),
Container(
child: Text("This is a widget"),
)
],
),
fit: BoxFit.contain,
17
)
),
);
}
}
Output:
18
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.center,
color: Colors.white,
child: Row(
children: <Widget>[
Expanded(
child: Text('Peter', textAlign: TextAlign.center),
),
Expanded(
child: Text('John', textAlign: TextAlign.center ),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
),
),
);
}
}
Output:
19
Week 8:
Create an application to demonstrate Gesture Detector.
import 'package:flutter/material.dart';
20
Output:
21
Week 9 & 10:
Create an application for Registration form.
import 'package:flutter/material.dart';
import 'package:form_field_validator/form_field_validator.dart';
import 'package:flutter/foundation.dart';
@override
State<Register> createState() => _RegisterState();
}
// return null;
// }),
22
validator: MultiValidator([
RequiredValidator(errorText: 'Enter first named'),
MinLengthValidator(3,
errorText: 'Minimum 3 charecter filled name'),
]),
decoration: InputDecoration(
hintText: 'Enter first Name',
labelText: 'first named',
prefixIcon: Icon(
Icons.person,
color: Colors.green,
),
errorStyle: TextStyle(fontSize: 18.0),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius:
BorderRadius.all(Radius.circular(9.0)))),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: MultiValidator([
RequiredValidator(errorText: 'Enter last named'),
MinLengthValidator(3,
errorText:
'Last name should be atleast 3 charater'),
]),
decoration: InputDecoration(
hintText: 'Enter last Name',
labelText: 'Last named',
prefixIcon: Icon(
Icons.person,
color: Colors.grey,
),
errorStyle: TextStyle(fontSize: 18.0),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius:
BorderRadius.all(Radius.circular(9.0)))),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: MultiValidator([
RequiredValidator(errorText: 'Enter email address'),
EmailValidator(
errorText: 'Please correct email filled'),
]),
decoration: InputDecoration(
hintText: 'Email',
labelText: 'Email',
23
prefixIcon: Icon(
Icons.email,
color: Colors.lightBlue,
),
errorStyle: TextStyle(fontSize: 18.0),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius:
BorderRadius.all(Radius.circular(9.0)))),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: MultiValidator([
RequiredValidator(errorText: 'Enter mobile number'),
PatternValidator(r'(^[0,9]{10}$)',
errorText: 'enter vaid mobile number'),
]),
decoration: InputDecoration(
hintText: 'Mobile',
labelText: 'Mobile',
prefixIcon: Icon(
Icons.phone,
color: Colors.grey,
),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius:
BorderRadius.all(Radius.circular(9)))),
),
),
Center(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
// margin: EdgeInsets.fromLTRB(200, 20, 50, 0),
child: RaisedButton(
child: Text(
'Register',
style: TextStyle(color: Colors.white, fontSize: 22),
),
onPressed: () {
if (_formkey.currentState!.validate()) {
print('form submiitted');
}
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
color: Colors.blue,
),
width: MediaQuery.of(context).size.width,
24
height: 50,
),
)),
Center(
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Center(
child: Text(
'Or Sign Up Using',
style: TextStyle(fontSize: 18, color: Colors.black),
),
),
),
),
Center(
child: Padding(
padding: EdgeInsets.only(top: 20, left: 90),
child: Row(
children: [
Container(
height: 40,
width: 40,
child: Image.asset(
'assets/google.png',
fit: BoxFit.cover,
)),
Container(
height: 70,
width: 70,
child: Image.asset(
'assets/vishal.png',
fit: BoxFit.cover,
),
),
Container(
height: 40,
width: 40,
child: Image.asset(
'assets/google.png',
fit: BoxFit.cover,
),
),
],
),
),
),
Center(
child: Container(
padding: EdgeInsets.only(top: 60),
child: Text(
'SIGN IN',
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
),
)
25
],
)),
),
));
}
}
26
Week 11:
Create an application to implement flutter calendar.
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
@override
void initState() {
super.initState();
_controller = CalendarController();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Calendar Example'),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TableCalendar(
initialCalendarFormat: CalendarFormat.month,
27
calendarStyle: CalendarStyle(
todayColor: Colors.blue,
selectedColor: Theme.of(context).primaryColor,
todayStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22.0,
color: Colors.white)
),
headerStyle: HeaderStyle(
centerHeaderTitle: true,
formatButtonDecoration: BoxDecoration(
color: Colors.brown,
borderRadius: BorderRadius.circular(22.0),
),
formatButtonTextStyle: TextStyle(color: Colors.white),
formatButtonShowsNext: false,
),
startingDayOfWeek: StartingDayOfWeek.monday,
onDaySelected: (date, events) {
print(date.toUtc());
},
builders: CalendarBuilders(
selectedDayBuilder: (context, date, events) => Container(
margin: const EdgeInsets.all(5.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(8.0)),
child: Text(
date.day.toString(),
style: TextStyle(color: Colors.white),
)),
todayDayBuilder: (context, date, events) => Container(
margin: const EdgeInsets.all(5.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8.0)),
child: Text(
date.day.toString(),
style: TextStyle(color: Colors.white),
)),
),
calendarController: _controller,
)
],
28
),
),
);
}
}
Output
29
Week 12:
Create an application to implement Animated Text in Flutter
Rotate
import 'package:animated_text_kit/animated_text_kit.dart';
AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('AWESOME',
textStyle: TextStyle(
fontSize: 30,
color: Colors.white,
backgroundColor: Colors.blue)),
RotateAnimatedText('OPTIMISTIC',
textStyle: TextStyle(
letterSpacing: 3,
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.orange)),
RotateAnimatedText(
'DIFFERENT',
textStyle: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
),
),
],
isRepeatingAnimation: true,
totalRepeatCount: 10,
pause: Duration(milliseconds: 1000),
30
), ),
],
);
Output:
31