Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

1. Design Student Registration Form in flutter which takes input like Full Name, Password,
Email, Phone Number, Gender, Address, and Courses Applied For. (Note:

• Use Radio widget for gender.

• Courses Applied for (B.C.A, B.Com, B.Sc, B.A.) – Use CheckboxListTile widget. •

Use proper input type for all the fields.) Ans:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) { return
MaterialApp( title: 'Flutter
Demo', theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Login'),
);
}
}

class MyHomePage extends StatefulWidget { const

MyHomePage({super.key, required this.title});
final String title;

@override
State<MyHomePage> createState() => _MyHomePageState(); }

class _MyHomePageState extends State<MyHomePage> { String?

gender; bool bca=false; bool? bco=false; bool?
bsc=false;
bool? bba=false;

@override
Widget build(BuildContext context) {
return Scaffold( appBar:
AppBar(
title: Text(widget.title)
),

1
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

body: Container( color:

Colors.blue.shade100, height:
double.infinity, width: double.infinity,
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 20,), const Text("Login Form",style:
TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
const SizedBox(height: 20,), Padding(
padding: const EdgeInsets.only(left: 20,right: 20), child:
Column( children: const [
TextField( decoration: InputDecoration( hintText:
"Full Name",
border: OutlineInputBorder()),
),
SizedBox(height: 6),
TextField( obscureText: true,
decoration: InputDecoration( hintText:
"Password", border:
OutlineInputBorder()),
),
SizedBox(height: 6),
TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration( hintText: "Email",
border: OutlineInputBorder()),
),
SizedBox(height: 6),
TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration( hintText:
"Phone Number",
border: OutlineInputBorder()),
),
SizedBox(height: 6),
TextField(
decoration: InputDecoration(
hintText: "Address", border: OutlineInputBorder()),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Column( crossAxisAlignment:
CrossAxisAlignment.start,
children: [

2
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

SizedBox(height: 5),
Text("Gender",style: TextStyle(fontSize: 18),),
Row( children:
[
Radio(value: "Male", groupValue: gender, onChanged: (value){
setState(() {
gender=value.toString();
});
}),
Text("Male"),
Radio(value: "Female", groupValue: gender, onChanged: (value){
setState(() {
gender=value.toString();
});
}),
Text("Female"),
Radio(value: "Other", groupValue: gender, onChanged: (value){
setState(() {
gender=value.toString();
});
}),
Text("Other"),
],
),
Row(
children: [ Container(
width: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 5),
Text("Course",style: TextStyle(fontSize: 18),),
CheckboxListTile( title: Text('B.C.A'),
value: bca, onChanged: (value){
setState(() { bca=value!;
});
}),
CheckboxListTile( title:
Text('B.Com'), value: bco, onChanged:
(value){
setState(() { bco=value!;
});
})
],
),
),

3
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

Container(
width: 150, child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 23),
CheckboxListTile( title:
Text('B.Sc'), value: bsc, onChanged:
(value){
setState(() { bsc=value!;
});
}),
CheckboxListTile( title:
Text('B.A.'), value: bba,
onChanged: (value){
setState(() { bba=value!;
});
})
],
),
),
],
),
SizedBox(height: 10,),
Center(
child: ElevatedButton(onPressed: () {
}, child: Text('Submit')),
)
],
),
)
],
),
),
),
);
} }
Output:

4
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

2. Create flutter application to draw bar chart in flutter based on the following data.

Subject Science English History Match Music

Number of Students 60 50 80 55 90
Passed

ANS:-
import 'package:flutter/material.dart'; import
'package:syncfusion_flutter_charts/charts.dart';

void main() { return runApp(_ChartApp());

}

5
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

class _ChartApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue), home:
_MyHomePage(),
);
}
}

class _MyHomePage extends StatefulWidget {

_MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<_MyHomePage> { late

List<_ChartData> data; late TooltipBehavior _tooltip;

@override void
initState() { data
=[
_ChartData('Science', 60),
_ChartData('English', 50),
_ChartData('History', 80),
_ChartData('Maths', 55),
_ChartData('Music', 90)
];
_tooltip = TooltipBehavior(enable: true); super.initState();
}

6
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: const Text('Charts'),
),
body: Padding(
padding: const EdgeInsets.all(12),
child: SfCartesianChart(
backgroundColor: Colors.grey.shade100,
primaryXAxis: CategoryAxis(),
primaryYAxis: NumericAxis(minimum: 0, maximum: 95, interval: 5),
tooltipBehavior: _tooltip,
series: <ChartSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>( dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y, color:
Colors.black,
),
]),
));
}
}

class _ChartData {
_ChartData(this.x, this.y);

final String x;
final double y;
}

7
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

OUTPUT:-

3. Create an application in flutter which takes

Username and Password as an input from user to display Login Form. When user clicks on
Login button, message will be display as toast message “Welcome [UserName]”.
(Note: Use Form widget to design Login form and also use Stack widget to set background
image to make the Login Screen attractive.)
4. Create an application using flutter to implement AlertDialog for Practical 3, in which if
user clicks on Yes button from alert dialog, an application will be closed and if user
clicks on ‘No’ button, then an alert dialog will be closed.

ANS:-
import 'dart:io';

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

'package:fluttertoast/fluttertoast.dart';

void main() { runApp(const

MyApp());
}

8
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

class MyApp extends StatelessWidget { const

MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp( title: 'Flutter Demo',
theme: ThemeData( primarySwatch:
Colors.green,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget { const

MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

var result = ""; void dispToast() { Fluttertoast.showToast(
msg:
"Welcome:$result", toastLength:
Toast.LENGTH_LONG, gravity:
ToastGravity.BOTTOM,

9
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

backgroundColor: Colors.black, textColor:

Colors.white, fontSize:
16.0);
}

@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(
title: Text('Login'),
),
body: Stack(
children: [
Container( height: double.infinity, width: double.infinity,
decoration:
BoxDecoration(image: DecorationImage(image: AssetImage('assets/back.jpg'),fit: BoxFit.fill)),
),
Center(
child: Container(height: 400,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),boxShadow: [
BoxShadow(color: Colors.transparent.withOpacity(0.7),blurRadius: 10)
]
), child:
Padding(
padding: const
EdgeInsets.only(left:
25,right: 25),

child: Column(children: [
SizedBox(height: 60),

10
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

Text('Login',style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.bold),),

SizedBox(height: 30,),
TextField(onChanged: (value) { result=value;
},style: TextStyle(color: Colors.white),cursorColor: Colors.white, decoration:
InputDecoration(hintText: 'Name',hintStyle: TextStyle(color: Colors.white),focusedBorder:
OutlineInputBorder(borderSide: BorderSide(width: 2,color: Colors.white)),enabledBorder:
OutlineInputBorder(borderSide: BorderSide(width: 2,color: Colors.white)),)
,),
SizedBox(height: 8),
TextField(obscureText: true,style: TextStyle(color: Colors.white),cursorColor: Colors.white,
decoration: InputDecoration(hintText: 'Password',hintStyle: TextStyle(color:
Colors.white),focusedBorder: OutlineInputBorder(borderSide: BorderSide(width: 2,color:
Colors.white)),enabledBorder: OutlineInputBorder(borderSide: BorderSide(width: 2,color:
Colors.white)),)
,),
SizedBox(height: 20,), Container(
width:
150, child:
ElevatedButton(onPressed: () {
dispToast();
}, child: Text('Login'),),
),
SizedBox(height: 15,), Container(
width:
150, child:
ElevatedButton(onPressed: () {
showDialog( context: context,
builder: (BuildContext context) {
return AlertDialog( title: Text('Exit'),
content: const Text("Are You Sure Exit"),
actions: <Widget>[ TextButton(
child: const Text("Yes"),
onPressed: () { exit(0);
},

11
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

),
TextButton(
child: const Text("No"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}, child: Text('Exit'),),
),

]),
),
),
)
],
)
);
}
}
OUTPUT:-

12
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

5. Create an application in flutter to design portfolio for applying job.

ANS:-
import 'package:flutter/material.dart';

void main() { runApp(const

MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

13
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

Widget build(BuildContext context) {

return MaterialApp( title: 'Flutter Demo',
theme: ThemeData( primarySwatch:
Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget { const

MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> { @override

Widget build(BuildContext context) {

return Scaffold( body:

Container( height:
double.infinity, width:
double.infinity, color:
const
Color(0xffdbdfff), child:
SingleChildScrollView( child:
Column(

14
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

crossAxisAlignment: CrossAxisAlignment.start, children:

[ const Padding(
padding: EdgeInsets.only(top: 40,bottom: 5), child: Center(child:
Text("Portfollio",style: TextStyle(fontSize: 27,fontWeight: FontWeight.w600),)),
),
Center(child: Image.asset('assets/boy.png',height: 150,width: 150,)), Padding(
padding: EdgeInsets.only(left: 15,right: 15), child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("INFORMATION",style: TextStyle(fontWeight: FontWeight.bold),),
Text("RAJUBHAI REKDIWALA",style: TextStyle(fontSize: 28,fontWeight:
FontWeight.w600),),
SizedBox(height: 5,),
Row( children: [
Text('AGE: ',style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold),),
Text('19',style: TextStyle(fontSize: 17),)
],
),
Row( children:
[
Text('JOB TITLE: ',style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold),),
Text('APP DESIGNING',style: TextStyle(fontSize: 17),)
],
),
Row( children:
[
Text('LOCATION: ',style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold),),
Text('SURAT,GUJRAT',style: TextStyle(fontSize: 17),)
],
),

15
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

Row( children:
[
Text('QUALIFICATION: ',style: TextStyle(fontSize: 17,fontWeight:
FontWeight.bold),),
Text('B.C.A',style: TextStyle(fontSize: 17),)
],
),
SizedBox(height: 4),
Text('ABOUT:',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold)),
Text('We are looking out for a Flutter Developer who will be running anddesigning
product application features across various cross platform devices. Just like Lego boxes that fit on top of
one another, we are looking out for someone who has experience using Flutter widgets that can be
plugged together, customized and deployed anywhere. Someone who is passionate about code writing,
solving technical errors and taking up full ownership of app development.',style: TextStyle(fontSize:
14),),
SizedBox(height: 4),
Text('GOAL:',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold)),
Text('Flutter offers a common code that works on both iOS and Android . There are no
restrictions; you can practically realise anything imaginable.',style: TextStyle(fontSize: 14),),
Text('Finally, some say that Flutter is so simple to comprehend that it’s not even necessary to have solid
developing knowledge in order to handle it.',style: TextStyle(fontSize: 14),),
Text('A wide range of material components are available: Material Design is a visual
language proposed by Google for mobile first applications with a ‘Flat Design’ approach.',style:
TextStyle(fontSize: 14),),
Text('NEEDS:',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
Text('As a popular framework for mobile app development, Flutter offers faster
development, exceptional performance, and cost-effectiveness. It makes use of widgets for reusability
across applications. This reduces the entire coding time and go-to-market time for apps. It has its own
rendering engine with a similar user interface for all platforms. There are enriched libraries for enhanced
performance.',style: TextStyle(fontSize: 14),),
Text('SKILLS:',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
Text('In depth understanding of front end languages like HTML, CSS3 and JavaScript. In
depth understanding of Object Oriented programming languages like Java and C++. Familiarity using
version control tools like Git, Subversion etc.',style: TextStyle(fontSize: 14),),
Text('CONTACT',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
Text('+91 8000000000',style: TextStyle(fontSize: 14),),
SizedBox(height: 20,),

16
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

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

OUTPUT:-

17
Moin Khan 405-2MOBILE APPLICATION DEVELOPMENT SPID:2021042078

18