Practical No.

1
1) Example for type of the variable using Dartpad:
Code:
void main(){
int num1 = 10;
double num2 = 3.145;
bool num3 = true;
String msg = 'Hello Everyone';
print(num1);
print(num2);
print(num3);
print(msg);
}

OUTPUT:

2) Example for different types of operations in Dart:

Code:
void main(){
int a = 30,b = 20;
var c =a+b;
print('sum of a and b is = $c');
var d =a-b;
print('The difference between a and b is = $d');
var e =-d;
print('The negation of difference is = $e');
var f =a*b;
print('The product of a and b is = $f');
var g =a/b;
print('The Division of a and b is = $g');
var h =a ~/ b;
print('The Quotient of a and b is = $h');
var i =a%b;
print('The remainder of a and b is = $i');
}

OUTPUT:

3) Example for Decision Making statement:

Code:
void main(){
var marks=74;
if(marks > 75)
{
print('Distinction');
}
else if (marks >= 60)
{
print('First class');
}
else if (marks >= 40)
{
print('Second class');
}
else
{
print('Fail');
}
}

OUTPUT:
 4) Example for Function:
Code:
void main(){
print(factorial(6));
}
factorial(number)
{
if(number<=0)
{
return 1;
}
else
{
return(number * factorial(number-1));
}
}

OUTPUT:

5) Example for Defining a class:

Code:
class Student{
var studName;
var studAge;
var studRno;
showstudInfo(){
print("Student Name is : ${studName}");
print("Student Age is : ${studAge}");
print("Student Roll Number is : ${studRno}");
}
}
void main()
{
var stud = new Student();
[Link]="Pranjali";
[Link]=20;
[Link]=10;
[Link]();
}

OUTPUT:
 Practical No. 2
Title: Designing the mobile app to implement different widgets,
1) Basic Widgets:
import 'package:flutter/[Link]';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({[Link]});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello Everyone....!',
style: TextStyle(fontWeight: FontWeight.w900),
),
),
),
);
}
}

OUTPUT:
2) Material Design Widget:
import 'package:flutter/[Link]';
void main() => runApp(const ElevatedButtonExampleApp());
class ElevatedButtonExampleApp extends StatelessWidget {
const ElevatedButtonExampleApp({[Link]});
@override
Widget build(BuildContext context){
return MaterialApp(
home:Scaffold(
appBar:AppBar(title:const Text('ElevatedButton sample')),
body: const ElevatedButtonExample(),
),
);
}
}
class ElevatedButtonExample extends StatefulWidget {
const ElevatedButtonExample({[Link]});
@override
State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();
}
class _ElevatedButtonExampleState extends State<ElevatedButtonExample>
{
@override
Widget build(BuildContext context){
final ButtonStyle style=
[Link](textStyle:const TextStyle(fontSize:20));
return Center(
child:Column(
mainAxisSize:[Link],
children:<Widget>[
ElevatedButton(
style:style,
onPressed:null,
child:const Text('Disabled'),
),
const SizedBox(height:30),
ElevatedButton(
style:style,
onPressed:() {},
child:const Text('Enabled'),
),
],
),
);
}
}

OUTPUT:

3) Custom Widgets:
import 'package:flutter/[Link]';
void main() => runApp(const AppBarApp());
class AppBarApp extends StatelessWidget {
const AppBarApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: AppBarExample(),
);
}
}
class AppBarExample extends StatelessWidget {
const AppBarExample({[Link]});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar Demo'),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
[Link](context).showSnackBar(
const SnackBar(content: Text('This is a snackbar')));
},
),
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Go to the next page',
onPressed: () {
[Link](
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Next page'),
),
body: const Center(
child: Text( 'This is the next page',
style: TextStyle(fontSize: 24),
),
),
);
},
),
);
},
 ),
],
),
body: const Center(
child: Text(
'This is the home page',
style: TextStyle(fontSize: 24),
),
),
);
}
}

OUTPUT:

4) Input:
import 'package:flutter/[Link]';
List<String> titles = <String>['Cloud','Beach','Sunny',
];
void main()=>runApp(const AppBarApp());
class AppBarApp extends StatelessWidget {
const AppBarApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorSchemeSeed: const Color(0xff6750a4),
useMaterial3: true,
),
 home: const AppBarExample(),
);
}
}
class AppBarExample extends StatelessWidget {
const AppBarExample({[Link]});
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = [Link](context).colorScheme;
final Color oddItemColor = [Link](0.05);
final Color evenItemColor = [Link](0.15);
const int tabsCount = 3;
return DefaultTabController(
initialIndex: 1,
length: tabsCount,
child: Scaffold(
appBar: AppBar(
title: const Text('AppBar sample'),
notificationPredicate: (ScrollNotification notification) {
return [Link] == 1;
},
scrolledUnderElevation: 4.0,
shadowColor: [Link](context).shadowColor,
bottom: TabBar(
tabs: <Widget>[
Tab(
icon: const Icon(Icons.cloud_outlined),
text: titles[0],
),
Tab(
icon: const Icon(Icons.beach_access_sharp),
text: titles[1],
),
Tab(
icon: const Icon(Icons.brightness_5_sharp),
text: titles[2],
),
],
 ),
),
body: TabBarView(
children: <Widget>[
[Link](
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: [Link] ? oddItemColor : evenItemColor,
title: Text('${titles[0]} $index'),
);
},
),
[Link](
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: [Link] ? oddItemColor : evenItemColor,
title: Text('${titles[1]} $index'),
);
},
),
[Link](
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: [Link] ? oddItemColor : evenItemColor,
title: Text('${titles[2]} $index'),
);
},
),
],
),
),
);
}}
OUTPUT:

5) Input:
import 'package:flutter/[Link]';
void main() => runApp(const ScaffoldExampleApp());
class ScaffoldExampleApp extends StatelessWidget {
const ScaffoldExampleApp({[Link]});
@override
Widget build(BuildContext context){
return MaterialApp(
home:ScaffoldExample(),
);
}
}
class ScaffoldExample extends StatefulWidget {
const ScaffoldExample({[Link]});
@override
State<ScaffoldExample> createState() => _ScaffoldExampleState();
}
class _ScaffoldExampleState extends State<ScaffoldExample>
{
int _count = 0;
@override
Widget build(BuildContext context){
return Scaffold(
appBar:AppBar(
title:const Text('Sample code'),
),
body:Center(child:Text('You have pressed the button $_count times.')),
backgroundColor:[Link].shade200,
floatingActionButton:FloatingActionButton(
onPressed: () => setState(() => _count++),
tooltip:'Increament Counter',
child:const Icon([Link]),
),
);
}
}

OUTPUT:
 Practical No. 3
Title: Designing the mobile app to implement different Layouts.
1) Input:
import 'package:flutter/[Link]';
void main() {
runApp(Demoapp());
}
class Demoapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Application',
debugShowCheckedModeBanner: true,
home: Scaffold(
body: Padding(
padding: const [Link](20.0),
child: Column(
mainAxisAlignment: [Link],
children: [
Row(
mainAxisAlignment: [Link],
children: [
Container(height: 100, width: 100, color: [Link]),
Container(
height: 100,
width: 100,
color: [Link][600],
),
Container(
height: 100,
width: 100,
color: [Link][900],
),
],
),
Row(
mainAxisAlignment: [Link],
 children: [
Container(height: 100, width: 100, color: [Link]),
Container(
height: 100,
width: 100,
color: [Link][100],
),
Container(
height: 100,
width: 100,
color: [Link][200],
),
],
),
],
),
),
),
);
}
}

Output:

2) Input:
import 'package:flutter/[Link]';
void main() => runApp (MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Layout widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch:[Link],
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center (
child: Container(
alignment: [Link],
color: [Link],
child: Stack(
children: <Widget> [
Container(
color:[Link],
),
Container (
color: [Link],
height: 400.0,
width: 300.0,
),
Container (
color: [Link],
height: 220.0,
width:200.0,)
],
),
),
);
}
}

OUTPUT:
 Practical No. 4
Title: Designing the mobile app to implement different Gestures.
Input:
import 'package:flutter/[Link]';
void main() {
runApp (MaterialApp (home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}): super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int numberOfTimesTapped = 0;
@override
Widget build (BuildContext context) {
return Scaffold(
body: Center (
child: Column (
mainAxisAlignment: [Link],
children: [
Text ('Tapped' + [Link]() + 'times', style: TextStyle (fontSize:30)),
GestureDetector(
onTap: () {
setState((){
numberOfTimesTapped++;
});
},
child: Container(
padding: [Link](20),
color: [Link] [200],
child: Text ('TAP HERE', style:TextStyle(fontSize: 30),)),
)
],
),
),
);
}
}

OUTPUT:
 Practical No. 5
Title: Designing the mobile app to implement the Theming and Styling.
1) Input:
import 'package:flutter/[Link]';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Theming and Styling'),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
[Link](
'[Link]
w=245&h=192&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
height: 350,
width: 350,
)
],
),
),
);
}
}
OUTPUT:

B) Input:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
const appName = 'Custom Themes';
return MaterialApp(
title: appName,
theme: ThemeData(
useMaterial3: true,
colorScheme: [Link](
seedColor:[Link],
brightness: [Link],
),
textTheme: TextTheme(
displayLarge: const TextStyle(
fontSize: 72,
fontWeight: [Link],
),
),
),
home:const MyHomePage(
title:appName,
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({ [Link], required [Link]});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title,
style: [Link] (context).[Link]!.copyWith(
color: Theme. of (context).[Link],
)),
backgroundColor: Theme. of (context).[Link],
),
body: Center (
child: Container(
padding: const [Link](
horizontal: 12,
vertical: 12,
),
color: Theme. of (context).[Link],
child: Text(
'Text with a background color',
style: Theme. of (context).[Link]!.copyWith(
color: Theme. of (context).[Link],
),
),
),
),
floatingActionButton: Theme(
data: [Link] (context).copyWith(
colorScheme: [Link](
seedColor: [Link],
brightness: [Link],
),
),
child: FloatingActionButton(
onPressed: () {},
child: const Icon ([Link]),
),
),
);
}
}

OUTPUT:

Practical No. 6
Title: Designing the mobile app to create User Authentication.
Input:
import 'package:flutter/[Link]';
void main()
{
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context){
return const MaterialApp(
title:'User Authentication',
home: Login(title:'Login App'),
);
}
}
class Login extends StatefulWidget{
const Login({Key? key,required [Link]}):super(key:key);
final String title;
@override
State<Login> createState() => _LoginState();
}
class _LoginState extends State<Login> {
final _formKey=GlobalKey<FormState>();
TextEditingController emailController=TextEditingController();
TextEditingController passwordController=TextEditingController();
@override
Widget build(BuildContext context){
return Scaffold(
appBar:AppBar(title:Text([Link])),
body:Form(
key:_formKey,
child:Padding(
padding:const [Link](horizontal:8,vertical:16),
child:Column(
crossAxisAlignment:[Link],
children: [
Padding(
padding:
const [Link](horizontal:8,vertical:16),
child:TextFormField(
controller:emailController,
decoration:const InputDecoration(
border:OutlineInputBorder(),labelText:"Email"),
validator:(value){
if(value==null || [Link]){
return 'please enter your email';
}
return null;
},
),
),
Padding(
padding:
const [Link](horizontal:8,vertical:16),
child:TextFormField(
controller:passwordController,
obscureText:true,
decoration:const InputDecoration(
border:OutlineInputBorder(),labelText:"Password"),
validator:(value){
if(value==null || [Link]){
return 'please enter your email';
}
return null;
},
),
),
Padding(
padding:const [Link](horizontal:8,vertical:16.0,),
child:Center(
child:ElevatedButton(
onPressed:() {
if (_formKey.currentState!.validate()){
 }
else{
[Link](context).showSnackBar(
const SnackBar(content:Text('please fill input')),
);
}
if([Link]=="abc@[Link]" &&
[Link]=="admin123"){
[Link](
context,
MaterialPageRoute(
builder:(context) => HomePage(
email:[Link],
)),
);
}else{
[Link](context).showSnackBar(
const SnackBar(content:Text('Invalid credentials')),
);
}
},
child: const Text('submit'),
),
),
)
],
),
),
),
);
}
}
class HomePage extends StatelessWidget{
const HomePage({[Link], required [Link]});
final String email;
@override
Widget build(BuildContext context){
return Scaffold(
 appBar:AppBar(title:const Text('Home Page')),
body:Column(
children: [
Text(email),
Center(
child:ElevatedButton(
onPressed:() {
[Link](context);
},
child:const Text("Go Back!"),
),
),
],
),
);
}
}

OUTPUT:

Practical No. 7
Title: Designing the mobile app to create Countdown Timer.
Input:
import 'package:flutter/[Link]';
import 'dart:async';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Countdown Timer Example",
theme: ThemeData(primarySwatch: [Link]),
home: const CodeDemo(),
);
}
}
class CodeDemo extends StatefulWidget {
const CodeDemo({[Link]});
@override
State<CodeDemo> createState() => _CodeDemoState();
}
class _CodeDemoState extends State<CodeDemo> {
int _seconds = 0;
int _minutes = 8;
int _hours = 0;
bool _isRunning = false;
Timer? _timer;
void _startTimer() {
setState(() {
_isRunning = true;
});
_timer = [Link](const Duration(seconds: 1), (timer) {
setState(() {
if (_seconds > 0) {
 _seconds--;
} else {
if (_minutes > 0) {
_minutes--;
_seconds = 59;
} else {
if (_hours > 0) {
_hours--;
_minutes = 59;
_seconds = 59;
} else {
_isRunning = false;
_timer?.cancel();
}
}
}
});
});
}
void _pauseTimer() {
setState(() {
_isRunning = false;
});
_timer?.cancel();
}
void _cancelTimer() {
setState(() {
_hours = 0;
_minutes = 0;
_seconds = 0;
_isRunning = false;
});
_timer?.cancel();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Countdown Timer')),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
Container(
width: [Link],
height: 200,
color: [Link],
child: Center(
child: Text(
'${_hours.toString().padLeft(2, '0')}:'
'${_minutes.toString().padLeft(2, '0')}:'
'${_seconds.toString().padLeft(2, '0')}',
style: const TextStyle(
fontSize: 60,
fontWeight: [Link],
),
),
),
),
const SizedBox(height: 50),
Column(
mainAxisSize: [Link],
crossAxisAlignment: [Link],
children: [
Text('Hours: $_hours', style: const TextStyle(fontSize: 20)),
Slider(
value: _hours.toDouble(),
min: 0,
max: 24,
divisions: 24,
label: "$_hours",
onChanged: !_isRunning
? (double value) {
setState(() {
_hours = [Link]();
});
 }
: null,
),
Text(
'Minutes: $_minutes',
style: const TextStyle(fontSize: 20),
),
Slider(
value: _minutes.toDouble(),
min: 0,
max: 59,
divisions: 59,
label: "$_minutes",
onChanged: !_isRunning
? (double value) {
setState(() {
_minutes = [Link]();
});
}
: null,
),
Text(
'Seconds: $_seconds',
style: const TextStyle(fontSize: 20),
),
Slider(
value: _seconds.toDouble(),
min: 0,
max: 59,
divisions: 59,
label: "$_seconds",
onChanged: !_isRunning
? (double value) {
setState(() {
_seconds = [Link]();
});
}
: null,
 ),
],
),
const SizedBox(height: 50),
Padding(
padding: const [Link](
8.0,
),
child: Row(
mainAxisAlignment: [Link],
children: [
ElevatedButton(
onPressed: () {
if (_isRunning) {
_pauseTimer();
} else {
if (_hours > 0 || _minutes > 0 || _seconds > 0) {
_startTimer();
}
}
},
style: [Link](
fixedSize: const Size(156, 46),
),
child: _isRunning
? const Text('Pause')
: const Text('Start'),
),
ElevatedButton(
onPressed: _cancelTimer,
style: [Link](
backgroundColor: [Link],
fixedSize: const Size(156, 46),
),
child: const Text('Cancel'),
),
],
),
 ),
],
),
),
),
);
}
@override
void dispose() {
_timer?.cancel();
[Link]();
}
}

Output:

Practical No. 8
Title: Designing the mobile app to implement the routing.
Input:
import 'package:flutter/[Link]';
void main() {
runApp(MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
TextEditingController name = TextEditingController();
TextEditingController id = TextEditingController();
TextEditingController semester = TextEditingController();
TextEditingController dept = TextEditingController();
TextEditingController city = TextEditingController();
return Scaffold(
appBar: AppBar(title: Text("User Info"), centerTitle: true),
body: Column(
children: [
SizedBox(height: 10),
TextField(
controller: name,
decoration: InputDecoration(
labelText: "Enter your name",
border: OutlineInputBorder(
borderRadius: [Link](15),
),
),
),
SizedBox(height: 10),
TextField(
controller: id,
decoration: InputDecoration(
labelText: "Enter your ID",
border: OutlineInputBorder(
borderRadius: [Link](15),
),
 ),
),
SizedBox(height: 10),
TextField(
controller: semester,
decoration: InputDecoration(
labelText: "Enter your Semester",
border: OutlineInputBorder(
borderRadius: [Link](15),
),
),
),
SizedBox(height: 10),
TextField(
controller: dept,
decoration: InputDecoration(
labelText: "Enter your department",
border: OutlineInputBorder(
borderRadius: [Link](15),
),
),
),
SizedBox(height: 10),
TextField(
controller: city,
decoration: InputDecoration(
labelText: "Enter your city",
border: OutlineInputBorder(
borderRadius: [Link](15),
),
),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
[Link](
context,
MaterialPageRoute(
 builder: (context) => NextScreen(
name: [Link],
id: [Link],
semester: [Link],
dept: [Link],
city: [Link],
),
),
).whenComplete(
() => {
[Link](),
[Link](),
[Link](),
[Link](),
[Link](),
},
);
},
child: Text("continue"),
),
],
),
);
}
}
class NextScreen extends StatelessWidget {
String? name, id, semester, dept, city;
NextScreen({[Link], [Link], [Link], [Link], [Link]});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Text("Name:" + [Link]()),
Text("ID:" + [Link]()),
Text("Semester:" + [Link]()),
Text("Department:" + [Link]()),
Text("City:" + [Link]()),
 ],
),
);
}
}

OUTPUT:

Practical No. 9
Title: Designing the mobile app to demonstrate navigation in an app.
Input:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return const MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({[Link]});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home Page')),
body: const Center(child: Text('Hello Everyone!')),
drawer: Drawer(
child: ListView(
padding: [Link],
children: <Widget>[
const DrawerHeader(
decoration: BoxDecoration(color: [Link]),
child: Text(
'Navigation Drawer',
style: TextStyle(color: [Link], fontSize: 24),
),
),
ListTile(
leading: const Icon([Link]),
title: const Text('Home'),
onTap: () {
[Link](context);
},
 ),
ListTile(
leading: const Icon(Icons.account_circle),
title: const Text('Profile'),
onTap: () {
[Link](
context,
MaterialPageRoute(builder: (context) => ProfilePage()),
);
},
),
],
),
),
);
}
}
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Profile Page')),
body: const Center(child: Text('Hi...Profile Page Content')),
);
}
}

OUTPUT:
 Practical No. 10
Title: Designing the mobile app to create a BMI Calculator.
Input:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'BMI Calculator',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _heightController = TextEditingController();
final _weightController = TextEditingController();
double? _bmi;
String _message = "Please enter your height and weight";
void _calculate() {
final double? height =
[Link](_heightController.[Link]);
final double? weight =
[Link](_weightController.[Link]);

if (height == null || height <= 0 || weight == null || weight <= 0) {

setState(() {
_message = "Your height and weight must be positive numbers.";
});
return;
}
 setState(() {
_bmi = weight / (height * height);
if (_bmi! < 18.5) {
_message = "You are underweight";
} else if (_bmi! < 24.9) {
_message = "You are healthy";
} else if (_bmi! < 29.9) {
_message = "You are overweight";
} else {
_message = "You are obese";
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BMI Calculator'),
),
body: Center(
child: Padding(
padding: const [Link](16.0),
child: Card(
elevation: 8,
child: Padding(
padding: const [Link](16.0),
child: Column(
mainAxisSize: [Link],
children: [
TextField(
decoration: const InputDecoration(
labelText: 'Height (m)',
border: OutlineInputBorder(),
),
keyboardType: [Link](decimal: true),
controller: _heightController,
),
const SizedBox(height: 20),
 TextField(
decoration: const InputDecoration(
labelText: 'Weight (kg)',
border: OutlineInputBorder(),
),
keyboardType: [Link](decimal: true),
controller: _weightController,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _calculate,
child: const Text('Calculate'),
),
const SizedBox(height: 20),
Text(
_bmi == null ? 'No Result' : _bmi!.toStringAsFixed(2),
style: const TextStyle(
fontSize: 40,
),
textAlign: [Link],
),
const SizedBox(height: 20),
Text(
_message,
textAlign: [Link],
),
],
),
),
),
),
),
);
}
}

OUTPUT:
Practical No. 11
Title: Designing the mobile app to develop a simple TO-DO list app to manage
the tasks.
Input:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: TodoListScreen(),
);
}
}
class TodoListScreen extends StatefulWidget {
@override
_TodoListScreenState createState() => _TodoListScreenState();
}
class _TodoListScreenState extends State<TodoListScreen> {
List<String> _todos = [];
void _addTodo() {
showDialog(
context: context,
builder: (BuildContext context) {
String newTodo = "";
return AlertDialog(
title: Text("Add a new To-Do"),
content: TextField(
onChanged: (value) {
newTodo = value;
},
),
actions: [
ElevatedButton(
onPressed: () {
setState(() {
 if ([Link]) {
_todos.add(newTodo);
}
});
[Link](context);
},
child: Text("Add"),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("To-Do List"),
backgroundColor: [Link],
),
body: [Link](
itemCount: _todos.length,
itemBuilder: (context, index) {
return Card(
elevation: 4,
margin: [Link](vertical: 8, horizontal: 16),
child: ListTile(
title: Text(
_todos[index],
style: TextStyle(fontSize: 18),
),
trailing: IconButton(
icon: Icon([Link]),
onPressed: () {
setState(() {
_todos.removeAt(index);
});
},
 ),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _addTodo,
backgroundColor: [Link],
child: Icon([Link]),
),
);
}
}

OUTPUT:

Practical No. 12
Title: Designing the mobile app to implement an Image Slider and Image
Gallery.
1) Input:
import 'package:flutter/[Link]';
void main() {
runApp(ImageSliderApp());
}
class ImageSliderApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ImageSliderScreen(),
);
}
}
class ImageSliderScreen extends StatefulWidget {
@override
_ImageSliderScreenState createState() => _ImageSliderScreenState();
}
class _ImageSliderScreenState extends State<ImageSliderScreen> {
PageController _pageController = PageController();
int _currentPage = 0;
List<String> _images = [
'[Link]
'[Link]
'[Link]
'[Link]
'[Link]
];
@override
void initState() {
[Link]();
_pageController.addListener(() {
setState(() {
_currentPage = _pageController.page!.round();
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Image Slider"), centerTitle: true), // AppBar
body: Stack(
alignment: [Link],
children: [
[Link](
controller: _pageController,
itemCount: _images.length,
itemBuilder: (context, index) {
return [Link](
_images[index],
fit: [Link],
);
},
),
Positioned(
bottom: 20,
child: Row(
mainAxisAlignment: [Link],
children: _buildPageIndicator(),
),
),
],
),
);
}
List<Widget> _buildPageIndicator() {
List<Widget> indicators = [];
for (int i = 0; i < _images.length; i++) {
[Link](
Container(
width: 10,
height: 10,
margin: [Link](horizontal: 5),
decoration: BoxDecoration(
 shape: [Link],
color: _currentPage == i ? [Link] : [Link],
),
),
);
}
return indicators;
}
}

OUTPUT:

Practical No. 13
Title: Designing the mobile app to implement the state management.
Input:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Checkbox Example',
theme: ThemeData(
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Map> availableHobbies = [
{"name": "Football", "isChecked": false},
{"name": "Baseball", "isChecked": false},
{
"name": "Video Games",
"isChecked": false,
},
{"name": "Reading Books", "isChecked": false},
{"name": "Dancing", "isChecked": false}
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
 title: const Text('Checkbox Example'),
backgroundColor: [Link],
centerTitle: true,
),
body: SingleChildScrollView(
child: Padding(
padding: const [Link](20),
child: Column(
crossAxisAlignment: [Link],
children: [
const Text(
'Choose your hobbies:',
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 10),
const Divider(),
const SizedBox(height: 10),
Column(
children: [Link]((hobby) {
return CheckboxListTile(
value: hobby["isChecked"],
title: Text(hobby["name"]),
onChanged: (newValue) {
setState(() {
hobby["isChecked"] = newValue;
});
},
);
}).toList(),
),
const SizedBox(height: 10),
const Divider(),
const SizedBox(height: 10),
Wrap(
children: [Link]((hobby) {
if (hobby["isChecked"] == true) {
return Card(
elevation: 3,
 color: [Link],
child: Padding(
padding: const [Link](8.0),
child: Text(hobby["name"]),
),
);
}
return Container();
}).toList(),
)
],
),
),
),
);
}
}

OUTPUT:
Practical No. 14
Title: Designing the mobile app to implement an animation.
Input:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Animation Example',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
bool _isPlay = false;
late AnimationController _controller;
@override
void initState() {
_controller = AnimationController(duration: const Duration(seconds: 1), vsync: this);
[Link]();
}

@override
void dispose() {
_controller.dispose();
[Link]();
}
@override
 Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Animated Play/Pause Button'),
backgroundColor: [Link],
centerTitle: true,
),
body: Center(
child: GestureDetector(
onTap: () {
if (_isPlay == false) {
_controller.forward();
_isPlay = true;
} else {
_controller.reverse();
_isPlay = false;
}
},
child: AnimatedIcon(
icon: AnimatedIcons.play_pause,
progress: _controller,
size: 200,
color: [Link],
),
),
));
}
}

OUTPUT: