Sr.
NO Topic Sign
MODULE 1
Q2) Check a “hello world” flutter
application and run it on an
emmulator.
Q3) Modify the apps title and memory
color in the material app widget.
Q4) Create a stateless widget that displays
a greeting message
Q5) Write a dart program to calculate the
sum of two number entered by the
user with UI.
Q6) Implement a dart program that user
if-else statements to determine if the
no is odd or even.
Q7) Demonstrate the use of switch case
statement in dart.
Q9) Create a flutter App with a Text
widget that display your name.
Q10) Build an app with a column widget to
arrange multiple text widget
vertically.
MODULE 2
Q1) Build a responsive UI using
MediaQuery to adapt to different
screen sizes.
Q2) Create a Flutter form with
TextFormField widgets to accept a
username and password.
Q4) Add navigation between two screens
in Flutter using the Navigator class
Q5) Create a Drawer widget for app
navigation with three menu options.
Q6) Display a list of items in a ListView
widget.
Q8) Add a GestureDetector to detect taps
and display a message in the console.
Q9) Implement a LongPress event to
change the color of a container.
Q12) Use a Slider widget to select a value
between 0 and 100 and display the
value.
Q13) Create a Switch widget to toggle
between two themes (light and dark).
MODULE 1
Q2) Check a “hello world” flutter application and
run it on an immulator.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
Output:
Q3) Modify the apps title and memory color in the
material app widget
Code:
import 'package:flutter/[Link]';
void main(){
runApp(const MyApp());
}
class MyApp extends StatelessWidget{
const MyApp({[Link]});
@override
Widget build( BuildContext context) {
return MaterialApp(
title: 'Tushar Flutter App',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar:AppBar(
backgroundColor:[Link],title:const Text("Tushars
Hello World App"),
centerTitle:true,
),
body:const Center(
child: Text(
'Hello,World!',
style:TextStyle(fontSize:30),
),
),
),
);
}
}
Output:
Q4)Create a stateless widget that displays a greeting
message
Code:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: GreetingMessage(),
),
),
);
}
}
class GreetingMessage extends StatelessWidget {
const GreetingMessage({[Link]});
@override
Widget build(BuildContext context) {
return const Text(
'Hello, Dear Flutter Learner Welcome!',
style: TextStyle(fontSize: 28, fontWeight: [Link],
color: [Link]),
textAlign: [Link],
);
}
}
Output:
Q4) Create a stateless widget that displays a greeting
message.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My first app',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(backgroundColor: [Link], title: const
Text('XYZ App'),
centerTitle: true,),
body: const Center(child: GreetingMessage()),
),
);
}
}
class GreetingMessage extends StatelessWidget {
const GreetingMessage({[Link]});
@override
Widget build(BuildContext context) {
return const Text(
'Hello, Dear flutter learner welcome',
style: TextStyle(fontSize: 24, fontWeight: [Link],color:
[Link],),
textAlign: [Link],);
}
}
Output:
Q5) Write a dart program to calculate the sum of two
number entered by the user with UI.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My Sum Calculator',
theme: ThemeData(
primarySwatch: [Link],
),
home: const SumCalculator(),
);
}
}
class SumCalculator extends StatefulWidget{
const SumCalculator({[Link]});
@override
State<SumCalculator> createState() => _SumCalculatorState();
}
class _SumCalculatorState extends State<SumCalculator> {
final TextEditingController num1Controller =
TextEditingController();
final TextEditingController num2Controller =
TextEditingController();
String _result = "";
void _calculateSum() {
int num1 = [Link]([Link]) ?? 0;
int num2 = [Link]([Link]) ?? 0;
int sum = num1 + num2;
setState(() {
_result = "The final sum of $num1 and $num2 is $sum";
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(" My Sum Calculator"),
centerTitle: true,
),
body: Padding(
padding: const [Link](16.0),
child: Column(
mainAxisAlignment: [Link],
children: [
TextField(
controller: num1Controller,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: "Enter first number",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16.0),
TextField(
controller: num2Controller,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: "Enter second number",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _calculateSum, child: const Text("Calculate
Sum")),
const SizedBox(height: 20),
Text(
_result,
style: const TextStyle(fontSize: 18, fontWeight:
[Link]),
),
],
),
),
);
}
Output:
Q6) Implement a dart program that user if-else
statements to determine if the no is odd or even.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget{
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Checking Odd Even Number',
theme: ThemeData(
primarySwatch: [Link],
),
home: const OddEvenChecker(),
);
}
}
class OddEvenChecker extends StatefulWidget{
const OddEvenChecker({[Link]});
@override
State<OddEvenChecker> createState() =>
_OddEvenCheckerState();
}
class _OddEvenCheckerState extends State<OddEvenChecker> {
final TextEditingController numberController=
TextEditingController();
String result = "";
void checkOddEven(){
int? number = [Link]([Link]);
if(number==null){
setState((){
result = "please enter a vaild number";
});
}else if(number%2==0){
setState((){
result = "$number is Even";
});
}else{
setState((){
result = "$number is Odd";
});
}
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Checking Odd Even Number"),
centerTitle: true,
),
body: Padding(
padding: const [Link](16.0),
child: Column(
mainAxisAlignment: [Link],
children: [
TextField(
controller: numberController,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: "Enter a number",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16.0),
ElevatedButton(
onPressed: checkOddEven,
child: const Text("Check"),
),
const SizedBox(height: 16.0),
Text(
result,
style: const TextStyle(fontSize: 20.0, fontWeight:
[Link]),
),
],
),
),
);
}
}
Output:
Q7) Demonstrate the use of switch case statement in dart.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context){
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Switch-Case Weekdays',
theme:ThemeData(primarySwatch: [Link]),
home: const WeekdayChk(),
);
}
}
class WeekdayChk extends StatefulWidget {
const WeekdayChk({[Link]});
@override
State<WeekdayChk> createState() =>
_WeekdayCheckerState();
}
class _WeekdayCheckerState extends
State<WeekdayChk> {
TextEditingController num1 = TextEditingController();
String result="";
void checkDay(){
int n1=[Link]([Link]);
if(n1 == n1<1 || n1>7){
setState((){
result="Please enter a valid number between 1 and
7.";
});
return;
}
switch(n1){
case 1:
result="1-Monday";
break;
case 2:
result="2-Tuesday";
break;
case 3:
result="3-Wednesday";
break;
case 4:
result="4-Thursday";
break;
case 5:
result="5-Friday";
break;
case 6:
result="6-Saturday";
break;
case 7:
result="7-Sunday";
break;
default:
result="Invalid input! Please enter a number
between 1 and 7.";
}
setState((){});
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text('Check week days'),centerTitle:
true,),
body: Padding(
padding: const [Link](12.0),
child: Column(
mainAxisAlignment: [Link],
children: [
TextField(
controller: num1,
keyboardType: [Link],
decoration: const InputDecoration(
labelText: 'Enter a number (1-7)',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: checkDay,
child: Text('Check Day'),
),
const SizedBox(height: 20),
Text(
result,
style: const TextStyle(fontSize: 18, fontWeight:
[Link]),
),
],
),
),
);
}
Output:
Q9) Create a flutter App with a Text widget that display
your name
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget{
const MyApp({[Link]});
@override
Widget build(BuildContext context){
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const Scaffold(
body:Center(
child:Text(
'Hello, Flutter!',
style:TextStyle(
fontSize:50,
fontWeight: [Link],
color:[Link],
),
),
),
),
);
}
}
Output:
Q10) Build an app with a column widget to arrange
multiple text widget vertically.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Column Example'),
centerTitle: true,
),
body:Center(
child:Column(
mainAxisAlignment: [Link],
crossAxisAlignment: [Link],
children: [
Text(
"Hello",
style: TextStyle(fontSize:24,color:[Link]),
),
Text(
"Welcome to Flutter",
style: TextStyle(fontSize:24,color:[Link]),
),
Text(
"This is arranged in a column",
style: TextStyle(fontSize:24,color:[Link]),
),
],
),
),
),
);
Output:
Q12)Create a Flutter app using Scaffold with an AppBar,
Body, and a FloatingActionButton.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title: 'Tushars Scaffold Example',
theme: ThemeData(primarySwatch: [Link]),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget{
const HomeScreen({[Link]});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Tushars Flutter App"),
centerTitle:true,
backgroundColor: [Link],
),
body: const Center(
child: Text(
"This is the body of the app!",
style: TextStyle(fontSize: 20),
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
[Link](context).showSnackBar(
const SnackBar(
content: Text("Floating Action Button Pressed!"),
duration: Duration(seconds: 2),
),
);
},
child: const Icon([Link]),
),
);
}
}
Output:
Q13)Create a simple counter app using StatefulWidget to
increment and display a number.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Counter App',
theme: ThemeData(primarySwatch: [Link]),
home: const CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget{
const CounterScreen({[Link]});
@override State<CounterScreen> createState() =>
_CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen>{
int counter = 0;
void incrementCounter(){
setState((){
counter++;
});
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Counter App"),
centerTitle:true,
),
body: Center(
child:Text(
"T Count: $counter",
style: const TextStyle(fontSize:30,
fontWeight:[Link]),
),
),
floatingActionButton: FloatingActionButton(
onPressed: incrementCounter,
child: const Icon([Link]),
),
);
}
}
Output:
Q14) Implement a TextField widget to accept user input
and display it using a Text widget.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'TextField Example',
theme: ThemeData(primarySwatch: [Link]),
home: const TextFieldScreen(),
);
}
}
class TextFieldScreen extends StatefulWidget{
const TextFieldScreen({[Link]});
@override
State<TextFieldScreen> createState() =>
_TextFieldScreenState();
}
class _TextFieldScreenState extends State<TextFieldScreen>{
String userInput = "";
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title:const Text("TextField Example"),
centerTitle:true,
),
body: Padding(
padding: const [Link](20.0),
child: Column(
mainAxisAlignment: [Link],
children:[
TextField(
decoration:const InputDecoration(
border: OutlineInputBorder(),
labelText: "Enter something",
),
onChanged: (Value){
setState((){
userInput = Value;
});
},
),
const SizedBox(height: 20),
Text(
"You typed: $userInput",
style: const TextStyle(fontSize: 20),
),
],
),
),
);
}
}
Output:
MODULE 2
Q1) Build a responsive UI using MediaQuery to adapt
to different screen sizes.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Responsive UI',
theme: ThemeData(primarySwatch:[Link]),
home: const ResponsiveScreen(),
);
}
}
class ResponsiveScreen extends StatelessWidget{
const ResponsiveScreen({[Link]});
@override
Widget build(BuildContext context) {
double screenWidth =
[Link](context).[Link];
double screenHeight =
[Link](context).[Link];
return Scaffold(
appBar: AppBar(
title: const Text("Responsive UI"),
centerTitle:true,
backgroundColor: [Link],
),
body: Center(
child: Container(
width: screenWidth*0.8,
height: screenHeight*0.3,
decoration: BoxDecoration(
color: [Link],
borderRadius: [Link](20),
),
child: Center(
child: Text(
"Screen Width: $
{[Link](0)}px/n"
"Screen Height: $
{[Link](0)}px",
textAlign: [Link],
style: TextStyle(
fontSize:screenWidth*0.05,
fontWeight: [Link],
color: [Link],
),
),
),
),
),
);
}
}
Output:
Q2) Create a Flutter form with TextFormField widgets
to accept a username and password.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Flutter Form',
theme: ThemeData(primarySwatch:[Link]),
home: const LoginForm(),
);
}
}
class LoginForm extends StatefulWidget{
const LoginForm({[Link]});
@override
State<LoginForm> createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm>{
final _formKey = GlobalKey<FormState>();
final TextEditingController usernameController =
TextEditingController();
final TextEditingController passwordController =
TextEditingController();
void submitform() {
if(_formKey.currentState!.validate()){
[Link](context).showSnackBar(
SnackBar(
content: Text(
"Welcome,${[Link]}!Your
Password is ${[Link]} characters
long."),
),
);
}
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Login Form"),
centerTitle:true,
),
body: Padding(
padding:const [Link](16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: [Link],
children:[
TextFormField(
controller: usernameController,
decoration: const InputDecoration(
labelText:"Username",
border: OutlineInputBorder(),
),
validator: (value){
if(value == null || [Link]){
return "Please Enter your Username";
}
return null;
},
),
const SizedBox(height:20),
TextFormField(
controller: passwordController,
decoration: const InputDecoration(
labelText:"password",
border: OutlineInputBorder(),
),
obscureText:true,
validator:(value){
if(value == null || [Link]){
return"Plass Enter your password";
}else if([Link]<6){
return"Password must be at least 6
characters";
}
return null;
},
),
const SizedBox(height:20),
ElevatedButton(
onPressed: submitform,
child: const Text("Login"),
),
],
),
),
),
);
}
}
Output:
Q4)Add navigation between two screens in Flutter using
the Navigator class.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Navigation Example',
home: const FirstScreen(),
);
}
}
class FirstScreen extends StatelessWidget{
const FirstScreen({[Link]});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: const Text("First Screen")),
body: Center(
child: ElevatedButton (
child: const Text("Go to Second Screen"),
onPressed: (){
[Link](
context,
MaterialPageRoute(builder: (context)=> const
SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget{
const SecondScreen({[Link]});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: const Text("Second Screen")),
body: Center(
child: ElevatedButton(
child: const Text("Go Back"),
onPressed: (){
[Link](context);
},
),
),
);
}
}
Output:
Q5)Create a Drawer widget for app navigation with three
menu options.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Drawer Example',
theme: ThemeData(primarySwatch: [Link]),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget{
const HomeScreen({[Link]});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Drawer Example"),
),
drawer: Drawer(
child: ListView(
padding: [Link],
children:[
const DrawerHeader(
decoration: BoxDecoration(
color: [Link],
),
child: Text(
"Menu",
style: TextStyle(color: [Link], fontSize:24),
),
),
ListTile(
leading: const Icon([Link]),
title: const Text("Home"),
onTap: (){
[Link](context);
[Link](context).showSnackBar(
const SnackBar(content:Text("Home Clicked")),
);
},
),
ListTile(
leading: const Icon([Link]),
title: const Text("Profile"),
onTap:(){
[Link](context);
[Link](context).showSnackBar(
const SnackBar(content: Text("Profile Clicked")),
);
},
),
ListTile(
leading: const Icon([Link]),
title: const Text("Settings"),
onTap:(){
[Link](context);
[Link](context).showSnackBar(
const SnackBar(content: Text("Settings Clicked")),
);
},
),
],
),
),
body: const Center(
child: Text(
"Swipe from left or click top-left icon to open drawer",
textAlign: [Link],
style: TextStyle(fontSize: 20),
),
),
);
}
}
Output:
Q6)Display a list of items in a ListView widget.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Indian Cricket Players',
theme:ThemeData(primarySwatch: [Link]),
home: const PlayerListScreen(),
);
}
}
class PlayerListScreen extends StatelessWidget{
const PlayerListScreen({[Link]});
final List<String> players = const[
"Virat Kohli",
"Rohit Sharma",
"KL Rahul",
"Jasprit Bumrah",
"Ravindra Jadeja",
"Hardik Pandya",
"Shubman Gill",
"Rishabh Pant",
"Mohammad Shami",
"Yuzvendra Chahal"
];
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Indian Cricket Players"),
centerTitle:true,
),
body:[Link](
itemCount: [Link],
itemBuilder:(context,index){
return ListTile(
leading: const Icon(Icons.sports_cricket),
title: Text(players[index]),
);
},
),
);
}
}
Output:
Q8)Add a GestureDetector to detect taps and display a
message in the console.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'GestureDetector Example',
theme: ThemeData(
primarySwatch: [Link]),
home: const GestureExampleScreen(),
);
}
}
class GestureExampleScreen extends StatelessWidget{
const GestureExampleScreen({[Link]});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Tap the Boxes"),
centerTitle: true,
),
body: [Link](
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
padding: const [Link](10),
children:[
buildBox(context, [Link],"Red Box"),
buildBox(context, [Link],"Green Box"),
buildBox(context, [Link],"Blue Box"),
buildBox(context, [Link],"Orange Box"),
],
),
);
}
Widget buildBox(BuildContext context, Color color,
String label) {
return GestureDetector(
onTap: (){
[Link](context).showSnackBar(
SnackBar(
content: Text("You have tapped $label",
style: TextStyle(
fontSize: 30.0,
),),
duration: const Duration(seconds:2),
),
);
},
child: Container(
color: color,
child: Center(
child: Text(
label,
style: const TextStyle(
color: [Link],
fontSize: 30,
fontWeight: [Link],
),
),
),
),
);
}
}
Output:
Q9)Implement a LongPress event to change the color of a
container.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title:'LongPress Example',
home: LongPressExample(),
);
}
}
class LongPressExample extends StatefulWidget{
const LongPressExample({[Link]});
@override
State<LongPressExample> createState()=>
_LongPressExampleState ();
}
class _LongPressExampleState extends
State<LongPressExample>{
Color boxColor = [Link];
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("LongPressExample"),
centerTitle: true,
),
body: Center(
child: GestureDetector(
onLongPress: (){
setState((){
boxColor = (boxColor == [Link])?
[Link]:
[Link];
});
},
child: Container(
height: 150,
width: 150,
color: boxColor,
child:const Center(
child: Text(
"Long Press Me",
style: TextStyle(
color:[Link],
fontSize: 18,
fontWeight:
[Link],
),
),
),
),
),
),
);
}
}
Output:
Q12) Use a Slider widget to select a value between 0 and
100 and display the value.
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Slider Example',
home: SliderExample(),
);
}
}
class SliderExample extends StatefulWidget{
const SliderExample({[Link]});
@override
State<SliderExample> createState() =>
_SliderExampleState();
}
class _SliderExampleState extends State<SliderExample>{
double _currentValue = 50;
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: const Text("Slider Example"),
centerTitle:true,
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children:[
Text(
"Value:${_currentValue.toInt()}",
style: const TextStyle(fontSize:24, fontWeight:
[Link]),
),
Slider(
value: _currentValue,
min:0,
max:100,
divisions:100,
label: _currentValue.toInt().toString(),
onChanged: (Value){
setState((){
_currentValue = Value;
});
},
),
],
),
),
);
}
}
Output:
Q13) Create a Switch widget to toggle between two themes
(light and dark).
Code:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({[Link]});
// This widget is the root of your application.
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp>{
bool _isDarkTheme = false;
@override
Widget build(BuildContext context){
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Theme Switch Example',
theme: _isDarkTheme ? [Link]():
[Link](),
home: Scaffold(
appBar: AppBar(
title: const Text("Theme Switch Example"),
centerTitle:true,
),
body: Center(
child:Row(
mainAxisAlignment: [Link],
children:[
const Text("Light"),
Switch(
value: _isDarkTheme,
onChanged: (Value){
setState((){
_isDarkTheme = Value;
});
},
),
const Text("Dark"),
],
),
),
),
);
}
}
Output: