Name - Sapna Tiwari
Roll No - 23-224
Practical no-1
Aim-to display:hello world in flutter
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
Practical no-2
Aim:implement of button event in flutter
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Button Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Code to execute when the button is pressed
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Button Pressed!')),
);
},
child: Text('Press Me'),
),
),
);
}
}
Practical no-3
Aim- implement of different widget in flutter (calculator)
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(CalculatorApp());
}
class CalculatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Calculator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CalculatorHomePage(),
);
}
}
class CalculatorHomePage extends StatefulWidget {
@override
_CalculatorHomePageState createState() => _CalculatorHomePageState();
}
class _CalculatorHomePageState extends State<CalculatorHomePage> {
String output = "0";
String _output = "0";
double num1 = 0.0;
double num2 = 0.0;
String operand = "";
buttonPressed(String buttonText) {
if (buttonText == "CLEAR") {
_output = "0";
num1 = 0.0;
num2 = 0.0;
operand = "";
} else if (buttonText == "+" ||
buttonText == "-" ||
buttonText == "/" ||
buttonText == "x") {
num1 = double.parse(output);
operand = buttonText;
_output = "0";
} else if (buttonText == ".") {
if (_output.contains(".")) {
return;
} else {
_output = _output + buttonText;
}
} else if (buttonText == "=") {
num2 = double.parse(output);
if (operand == "+") {
_output = (num1 + num2).toString();
}
if (operand == "-") {
_output = (num1 - num2).toString();
}
if (operand == "x") {
_output = (num1 * num2).toString();
}
if (operand == "/") {
_output = (num1 / num2).toString();
}
num1 = 0.0;
num2 = 0.0;
operand = "";
} else {
_output = _output + buttonText;
}
setState(() {
output = double.parse(_output).toStringAsFixed(2);
});
}
Widget buildButton(String buttonText) {
return Expanded(
child: TextButton(
style: TextButton.styleFrom(
padding: EdgeInsets.all(24.0),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.blue, width: 1),
borderRadius: BorderRadius.circular(5.0),
),
),
child: Text(
buttonText,
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
onPressed: () => buttonPressed(buttonText),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Calculator"),
),
body: Column(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 12.0),
child: Text(
output,
style: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
),
),
Expanded(
child: Divider(),
),
Column(children: [
Row(
children: <Widget>[
buildButton("7"),
buildButton("8"),
buildButton("9"),
buildButton("/"),
],
),
Row(
children: <Widget>[
buildButton("4"),
buildButton("5"),
buildButton("6"),
buildButton("x"),
],
),
Row(
children: <Widget>[
buildButton("1"),
buildButton("2"),
buildButton("3"),
buildButton("-"),
],
),
Row(
children: <Widget>[
buildButton("."),
buildButton("0"),
buildButton("00"),
buildButton("+"),
],
),
Row(
children: <Widget>[
buildButton("CLEAR"),
buildButton("="),
],
)
])
],
),
);
}
}
Practical no-4
Aim-implement of theme and styling in flutter
Code:-
import 'package:flutter/material.dart';
class MyCustomTheme extends ThemeExtension<MyCustomTheme> {
final Color customColor;
MyCustomTheme({required this.customColor});
@override
MyCustomTheme copyWith({Color? customColor}) {
return MyCustomTheme(
customColor: customColor ?? this.customColor,
);
}
@override
MyCustomTheme lerp(ThemeExtension<MyCustomTheme>? other, double t) {
if (other is! MyCustomTheme) {
return this;
}
return MyCustomTheme(
customColor: Color.lerp(customColor, other.customColor, t)!,
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Theme Extension Example',
theme: ThemeData(
extensions: <ThemeExtension<dynamic>>[
MyCustomTheme(customColor: Colors.purple),
],
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final customTheme = Theme.of(context).extension<MyCustomTheme>()!;
return Scaffold(
appBar: AppBar(
title: Text('Custom Theme Extension'),
),
body: Center(
child: Container(
color: customTheme.customColor,
child: Text('Custom Themed Container'),
),
),
);
}
}
Practical no-5
Aim-implement of gesture in flutter
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GestureDetector(
onTap: () {
print('Tap detected');
},
onDoubleTap: () {
print('Double tap detected');
},
onLongPress: () {
print('Long press detected');
},
onPanUpdate: (details) {
print('Pan update detected');
},
child: Container(
height: 300,
width: 300,
color: Colors.blue,
),
),
),
);
}
}
Practical no -6
Aim-implementation of layout in flutter
Code:-
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Layout Example'),
),
body: Column(
children: [
Container(
height: 100,
color: Colors.red,
),
Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.blue,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.green,
),
),
],
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Text('Hello, World!'),
),
],
),
),
);
}
}
Practical no -7
Aim- implement of animation in flutter
Code:-
import 'package:flutter/material.dart';
void main(){
runApp(FadeAnimation());
}
class FadeAnimation extends StatefulWidget {
@override
_FadeAnimationState createState() => _FadeAnimationState();
}
class _FadeAnimationState extends State<FadeAnimation> with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
_controller.forward();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _animation,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
);
}
}
