FLUTTER PROGRAMS
1.b) Write a simple Dart program to understand the language basics.
void main() {
print('Hello, World!');
2.a) Explore various Flutter widgets (Text, Image, Container, etc)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple Flutter App',
home: Scaffold(
appBar: AppBar(
title: Text('Text, Image, and Container Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Container with Text
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(16.0),
color: Colors.lightBlueAccent,
child: Text(
'Welcome to Flutter!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
// Image Widget
Container(
margin: EdgeInsets.all(16.0),
child: Image.network(
'https://flutter.dev/docs/cookbook/img-files/effects/split-check/Flutter.png',
width: 200,
),
),
],
),
),
),
);
2.b).Implement different layout structures using Row, Column, and Stack widgets.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Layout Widgets Example',
home: Scaffold(
appBar: AppBar(
title: Text('Layout Widgets Example'),
),
body: MyHomePage(),
),
);
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
// Row Example
Container(
padding: EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Container(
color: Colors.red,
height: 100,
child: Center(child: Text('Box 1')),
),
),
Expanded(
child: Container(
color: Colors.green,
height: 100,
child: Center(child: Text('Box 2')),
),
),
Expanded(
child: Container(
color: Colors.blue,
height: 100,
child: Center(child: Text('Box 3')),
),
),
],
),
),
// Column Example
Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.amber,
height: 100,
width: double.infinity,
child: Center(child: Text('Column Box 1')),
),
SizedBox(height: 10),
Container(
color: Colors.purple,
height: 100,
width: double.infinity,
child: Center(child: Text('Column Box 2')),
),
SizedBox(height: 10),
Container(
color: Colors.orange,
height: 100,
width: double.infinity,
child: Center(child: Text('Column Box 3')),
),
],
),
),
// Stack Example
Container(
padding: EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.center,
children: [
Container(
width: 200,
height: 200,
color: Colors.blueAccent,
),
Positioned(
top: 20,
left: 20,
child: Container(
width: 150,
height: 150,
color: Colors.red,
child: Center(child: Text('Top Layer')),
),
),
Positioned(
bottom: 20,
right: 20,
child: Container(
width: 50,
height: 50,
color: Colors.green,
child: Center(child: Text('Icon')),
),
),
],
),
),
],
),
);
}
3.a) Design a responsive UI that adapts to different screen sizes.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI Example',
home: Scaffold(
appBar: AppBar(
title: Text('Responsive UI Example'),
),
body: ResponsiveHomePage(),
),
);
class ResponsiveHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Get screen width
var screenWidth = MediaQuery.of(context).size.width;
return LayoutBuilder(
builder: (context, constraints) {
// Use LayoutBuilder to adapt layout based on width
if (constraints.maxWidth < 600) {
// Mobile Layout
return Column(
children: [
Expanded(child: buildBox(Colors.red, 'Mobile Box 1')),
Expanded(child: buildBox(Colors.green, 'Mobile Box 2')),
Expanded(child: buildBox(Colors.blue, 'Mobile Box 3')),
],
);
} else {
// Tablet/Desktop Layout
return Row(
children: [
Expanded(child: buildBox(Colors.red, 'Desktop Box 1')),
Expanded(child: buildBox(Colors.green, 'Desktop Box 2')),
Expanded(child: buildBox(Colors.blue, 'Desktop Box 3')),
],
);
},
);
}
Widget buildBox(Color color, String label) {
return Container(
margin: EdgeInsets.all(8.0),
color: color,
child: Center(
child: Text(
label,
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
);
3.b) Implement media queries and breakpoints for responsiveness.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI with Breakpoints',
home: Scaffold(
appBar: AppBar(
title: Text('Responsive UI Example'),
),
body: ResponsiveHomePage(),
),
);
class ResponsiveHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return MobileLayout();
} else if (constraints.maxWidth < 1200) {
return TabletLayout();
} else {
return DesktopLayout();
},
);
class MobileLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
buildBox(Colors.red, 'Mobile Box 1'),
buildBox(Colors.green, 'Mobile Box 2'),
buildBox(Colors.blue, 'Mobile Box 3'),
],
);
class TabletLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
buildBox(Colors.red, 'Tablet Box 1'),
buildBox(Colors.green, 'Tablet Box 2'),
],
);
class DesktopLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
buildBox(Colors.red, 'Desktop Box 1'),
buildBox(Colors.green, 'Desktop Box 2'),
buildBox(Colors.blue, 'Desktop Box 3'),
],
);
Widget buildBox(Color color, String label) {
return Container(
width: 150,
height: 100,
margin: EdgeInsets.all(8.0),
color: color,
child: Center(
child: Text(
label,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
);
}
4.a).Set up navigation between different screens using Navigator.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation Example',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
'/third': (context) => ThirdScreen(),
},
);
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Home Screen'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Text('Go to Second Screen'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/third');
},
child: Text('Go to Third Screen'),
),
],
),
),
);
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Second Screen'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home'),
),
],
),
),
);
}
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Third Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Third Screen'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home'),
),
],
),
),
);
}
4b) Implement navigation with named routes.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Named Routes Example',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
'/third': (context) => ThirdScreen(),
},
);
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Home Screen'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Text('Go to Second Screen'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/third');
},
child: Text('Go to Third Screen'),
),
],
),
),
);
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Second Screen'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home'),
),
],
),
),
);
}
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Third Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Third Screen'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home'),
),
],
),
),
);
}
5.a) Learn about stateful and stateless widgets.
import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
final String title;
MyStatelessWidget({required this.title});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(
title,
style: TextStyle(fontSize: 24),
),
);
import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Counter: $_counter',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
);
}
5.b) Implement state management using set State and Provider.
Using State
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'State Management Example',
home: SetStateCounter(),
);
class SetStateCounter extends StatefulWidget {
@override
_SetStateCounterState createState() => _SetStateCounterState();
class _SetStateCounterState extends State<SetStateCounter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SetState Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $_counter'),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
),
);
Using provider
First, you need to add the provider package to your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => CounterModel(),
child: MyApp(),
),
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Provider Example',
home: ProviderCounter(),
);
class ProviderCounter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Provider Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: ${context.watch<CounterModel>().counter}'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
context.read<CounterModel>().increment();
},
child: Text('Increment'),
),
],
),
),
);
class CounterModel with ChangeNotifier {
int _counter = 0;
int get counter => _counter;
void increment() {
_counter++;
notifyListeners(); // Notify all listeners to rebuild
