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