0% found this document useful (0 votes)
12 views

Flutter i2

Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views

Flutter i2

Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

5A) LEARN ABOUT STATEFUL AND STATELESS WIDGETS.

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Stateful vs Stateless Widgets'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Stateless widget
MyStatelessWidget(),

// Stateful widget
MyStatefulWidget(),
],
),
),
),
);
}
}

class MyStatelessWidget extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
color: Colors.blue,
child: Text(
'Stateless Widget',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
);
}
}

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(20),
color: Colors.green,
child: Column(
children: [
Text(
'Stateful Widget',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(height: 10),
Text(
'Counter: $counter',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Increment'),
),
],
),
);
}
}
5b) IMPLEMENT STATE MANAGEMENT USING PROVIDER.
main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'models/counter.dart';
import 'screens/counter_screen.dart';

void main() {
runApp(
ChangeNotifierProvider(
create: (_) => Counter(),
child: MyApp(),
),
);
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterScreen(),
);
}
}

models/counter.dart
dart
Copy code
import 'package:flutter/material.dart';

class Counter with ChangeNotifier {


int _count = 0;

int get count => _count;

void increment() {
_count++;
notifyListeners();
}
}

screens/counter_screen.dart
dart
Copy code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/counter.dart';

class CounterScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
final counter = Provider.of<Counter>(context);
return Scaffold(
appBar: AppBar(title: Text('Counter using Provider')),
body: Center(
child: Text(
'Counter: ${counter.count}',
style: TextStyle(fontSize: 24),
),
),
floatingActionButton: FloatingActionButton(
onPressed: counter.increment,
child: Icon(Icons.add),
),
);
}
}
6A) CREATE CUSTOM WIDGETS FOR SPECIFIC UI ELEMENTS.
lib/main.dart
import 'package:flutter/material.dart';
import 'widgets/custom_title.dart';
import 'widgets/custom_button.dart';
import 'widgets/labeled_icon.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Custom Widgets Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomTitle(text: 'Welcome!'),
SizedBox(height: 20),
LabeledIcon(
icon: Icons.star,
label: 'Favorite Item',
),
SizedBox(height: 20),
CustomButton(
label: 'Click Me',
onPressed: () {
// Perform any action here
print("Button pressed!");
},
),
],
),
),
),
);
}
}

lib/widgets/custom_button.dart
dart
Copy code
import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {


final String label;
final VoidCallback onPressed;
const CustomButton({
Key? key,
required this.label,
required this.onPressed,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
backgroundColor: Colors.blueAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
label,
style: TextStyle(fontSize: 18, color: Colors.white),
),
);
}
}
lib/widgets/custom_counter_display.dart
import 'package:flutter/material.dart';
class CustomCounterDisplay extends StatelessWidget {
final int counter;

const CustomCounterDisplay({
Key? key,
required this.counter,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Text(
'Counter: $counter',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
);
}
}

lib/widgets/custom_icon_text_row.dart
dart
Copy code
import 'package:flutter/material.dart';

class CustomIconTextRow extends StatelessWidget {


final IconData icon;
final String text;

const CustomIconTextRow({
Key? key,
required this.icon,
required this.text,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Row(
children: [
Icon(icon, color: Colors.blueAccent),
SizedBox(width: 8),
Text(
text,
style: TextStyle(fontSize: 16, color: Colors.black),
),
],
);
}
}

lib/widgets/custom_title.dart
dart
Copy code
import 'package:flutter/material.dart';

class CustomTitle extends StatelessWidget {


final String text;

const CustomTitle({Key? key, required this.text}) : super(key: key);

@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.blueAccent,
),
textAlign: TextAlign.center,
);
}
}

lib/widgets/labeled_icon.dart
dart
Copy code
import 'package:flutter/material.dart';
class LabeledIcon extends StatelessWidget {
final IconData icon;
final String label;

const LabeledIcon({
Key? key,
required this.icon,
required this.label,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: Colors.blueAccent),
SizedBox(width: 8),
Text(
label,
style: TextStyle(fontSize: 16),
),
],
);
}
}
7a) DESIGN A FORM WITH VARIOUS INPUT FIELDS.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Form with Input Fields'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: MyForm(),
),
),
);
}
}

class MyForm extends StatefulWidget {


@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {


final _formKey = GlobalKey<FormState>();
String _name = '';
String _email = '';
String _password = '';

@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
onSaved: (value) {
_name = value!;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
return null;
},
onSaved: (value) {
_email = value!;
},
),
TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
return null;
},
onSaved: (value) {
_password = value!;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// You can now use the collected data
print('Name: $_name');
print('Email: $_email');
print('Password: $_password');
}
},
child: Text('Submit'),
),
],
),
);
}
}
7b) IMPLEMENT FORM VALIDATION AND ERROR HANDLING.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Form Validation and Error Handling'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: MyForm(),
),
),
);
}
}

class MyForm extends StatefulWidget {


@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {


final _formKey = GlobalKey<FormState>();
String _name = '';
String _email = '';
String _password = '';

@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
onSaved: (value) {
_name = value!;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
if (!value.contains('@')) {
return 'Please enter a valid email address';
}
return null;
},
onSaved: (value) {
_email = value!;
},
),
TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
if (value.length < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
onSaved: (value) {
_password = value!;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// Display collected data
print('Name: $_name');
print('Email: $_email');
print('Password: $_password');
}
},
child: Text('Submit'),
),
],
),
);
}
}
8a) ADD ANIMATIONS TO UI ELEMENTS USING FLUTTER'S ANIMATION
FRAMEWORK.
main.dart
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: AnimatedLogo(),
);
}
}

class AnimatedLogo extends StatefulWidget {


@override
_AnimatedLogoState createState() => _AnimatedLogoState();
}

class _AnimatedLogoState extends State<AnimatedLogo>


with SingleTickerProviderStateMixin {
late AnimationController controller;
late Animation<double> animation;

@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);

animation = Tween<double>(begin: 0, end: 300).animate(controller)


..addListener(() {
setState(() {
// The state that has changed here is the animation object’s value.
});
});

controller.forward();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Logo'),
),
body: Center(
child: Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: animation.value,
width: animation.value,
child: FlutterLogo(),
),
),
);
}

@override
void dispose() {
controller.dispose();
super.dispose();
}
}
8b) EXPERIMENT WITH DIFFERENT TYPES OF ANIMATIONS (FADE, SLIDE, ETC.)
main.dart
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: AnimationExperiment(),
);
}
}

class AnimationExperiment extends StatefulWidget {


@override
_AnimationExperimentState createState() => _AnimationExperimentState();
}

class _AnimationExperimentState extends State<AnimationExperiment>


with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
late Animation<double> _scaleAnimation;

@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);

_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);

_slideAnimation = Tween<Offset>(
begin: Offset(-1.0, 0.0),
end: Offset.zero,
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));

_scaleAnimation = Tween<double>(
begin: 0.5,
end: 1.0,
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));

_controller.forward();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animation Experiment'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FadeTransition(
opacity: _fadeAnimation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Fade Animation',
style: TextStyle(color: Colors.white),
),
),
),
),
SizedBox(height: 20),
SlideTransition(
position: _slideAnimation,
child: Container(
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Slide Animation',
style: TextStyle(color: Colors.white),
),
),
),
),
SizedBox(height: 20),
ScaleTransition(
scale: _scaleAnimation,
child: Container(
width: 200,
height: 200,
color: Colors.orange,
child: Center(
child: Text(
'Scale Animation',
style: TextStyle(color: Colors.white),
),
),
),
),
],
),
),
);
}
}

You might also like