CPMD 202503103530001
Practical-1
Aim:- Create new flutter project using each of the following: (1)Terminal,
(2)VS Code, (3)Android Studio
Run the above created flutter project in Android emulator using:
(1)Terminal, (2)VS Code, (3)Android Studio
(1)Terminal
(2) VS code
1
CPMD 202503103530001
(3) Android Studio
(1) Terminal
2
CPMD 202503103530001
(2) VS code
(3) Android Studio
3
CPMD 202503103530001
Practical-2
Aim:- Design a flutter screen with following widgets as per given hierarchy:
(I) Design two attractive themes “EmeraldTheme” and “RubyTheme”
(II) Apply any one theme initially and display that theme name in the Text
Widget.
(III) On tap of the ElevatedButton, apply other than the currently applied
Theme and display that theme name in the Text widget.
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(Practical2());}
class Practical2 extends StatefulWidget {
_Practical2State createState() => _Practical2State();}
class _Practical2State extends State<Practical2> {
bool isEmerald = true;
ThemeData get emeraldTheme => ThemeData(
primarySwatch: Colors.green,
brightness: Brightness.light,
scaffoldBackgroundColor: Colors.green.shade50,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), ), ), ),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.green.shade100 ), );
4
CPMD 202503103530001
ThemeData get rubyTheme => ThemeData(
primarySwatch: Colors.red,
brightness: Brightness.light,
scaffoldBackgroundColor: Colors.red.shade50,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),),), ),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.red.shade100, ),);
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: AnimatedTheme(
data: isEmerald ? emeraldTheme : rubyTheme,
duration: Duration(milliseconds: 600), // smooth transition
child: Builder(
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Practical - 2"),
centerTitle: true,),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 20),
TextField(
5
CPMD 202503103530001
decoration: InputDecoration(
hintText: "Enter something...",), ),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
setState(() {
isEmerald = !isEmerald;});},
child: Text("Switch Theme"), ),
SizedBox(height: 20),
Text(
isEmerald
? "Current Theme: EmeraldTheme"
: "Current Theme: RubyTheme",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold, ),),],),),),),),);}}
Output:-
6
CPMD 202503103530001
7
CPMD 202503103530001
Practical-3
Aim:- Develop a flutter app with two TextField widgets, a Text widget, and an
ElevatedButton widget. On tap of the ElevatedButton, compute the sum
of two values from TextFields and display the result in the Text widget.
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(SumApp());}
class SumApp extends StatefulWidget {
_SumAppState createState() => _SumAppState();}
class _SumAppState extends State<SumApp> {
final TextEditingController num1Controller = TextEditingController();
final TextEditingController num2Controller = TextEditingController();
String result = "";
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Sum of Two Numbers"),
centerTitle: true,),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: num1Controller,
8
CPMD 202503103530001
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Enter first number",),),
SizedBox(height: 20),
TextField(
controller: num2Controller,
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Enter second number",),),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
setState(() {
int n1 = int.tryParse(num1Controller.text) ?? 0;
int n2 = int.tryParse(num2Controller.text) ?? 0;
int sum = n1 + n2;
result = "Sum = $sum";});},
child: Text("Calculate Sum"),),
SizedBox(height: 20),
Text(
result,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),],),),),),);}}
9
CPMD 202503103530001
Output:-
10
CPMD 202503103530001
Practical-4
Aim:- Create a flutter app having a Slider and a Text widget. Display updated
value in Text widget whenever user changes Slider value.
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(SliderApp());}
class SliderApp extends StatefulWidget {
_SliderAppState createState() => _SliderAppState();}
class _SliderAppState extends State<SliderApp> {
double _sliderValue = 50; // initial value
Color _getColor(double value) {
if (value <= 33) {
return Colors.green;
} else if (value <= 66) {
return Colors.orange;
} else {
return Colors.red; }}
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Slider Example"),
centerTitle: true,),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
11
CPMD 202503103530001
Slider(
value: _sliderValue,
min: 0,
max: 100,
divisions: 100,
label: _sliderValue.round().toString(),
onChanged: (value) {
setState(() {
_sliderValue = value; });}, ),
SizedBox(height: 20),
Text(
"Value: ${_sliderValue.toStringAsFixed(1)}",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: _getColor(_sliderValue), ),),],),),),); }}
Output:-
12
