Scribd
Upload
39 views15 pages

Flutter (2-9) Exps

The document contains multiple Flutter code examples demonstrating various UI components and functionalities, including text and image containers, responsive layouts, navigation between screens, state management, custom widgets, form validation, animations, and fetching data from an API. Each section showcases different aspects of Flutter development, such as using stateful and stateless widgets, implementing media queries, and applying themes. Overall, it serves as a comprehensive guide for building Flutter applications with essential features.

Uploaded by

Keerthi Reddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views15 pages

Flutter (2-9) Exps

The document contains multiple Flutter code examples demonstrating various UI components and functionalities, including text and image containers, responsive layouts, navigation between screens, state management, custom widgets, form validation, animations, and fetching data from an API. Each section showcases different aspects of Flutter development, such as using stateful and stateless widgets, implementing media queries, and applying themes. Overall, it serves as a comprehensive guide for building Flutter applications with essential features.

Uploaded by

Keerthi Reddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

2a) text image container

import 'package:flutter/[Link]';
void main(){
runApp(MyWidgetsApp());
}
class MyWidgetsApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Widgets Example'),
),
body:Center(
child: Container(
height:400,
width: [Link],
padding: [Link](10),
decoration: BoxDecoration(
color:[Link],
borderRadius: [Link](8),
),
child:Column(
mainAxisAlignment: [Link],
children: [
Text(
'I am inside a container',
style:TextStyle(fontSize: 24,fontWeight: [Link]),
),
SizedBox(height: 20),
[Link](
'assets/images/[Link]',
height:250,
width: 250,
)
],
)
),
)
),
);
}
}
2b)row column stack
import 'package:flutter/[Link]';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text('Layout Widgets Example'),
),
body: Center(
child:Column(
mainAxisAlignment: [Link],
children: [
Row(
mainAxisAlignment: [Link],
children: [
Container(color: [Link], height: 50,width: 50,child: Text('box1',style:
TextStyle(color: [Link]),),),
SizedBox(width: 20),
Container(color:[Link],height: 50,width: 50,child: Text('box2',style:
TextStyle(color: [Link]),),),
SizedBox(width: 20),
Container(color:[Link],height: 50,width: 50,child: Text('box3',style:
TextStyle(color: [Link]),),),
],
),

SizedBox(height:50),
Column(
mainAxisAlignment: [Link],
children: [
Container(color: [Link],height: 50,width: 50,child: Text('box1',style:
TextStyle(color: [Link]),),),
SizedBox(height: 20),
Container(color:[Link],height: 50,width: 50,child: Text('box2',style:
TextStyle(color: [Link]),),),
SizedBox(height: 20),
Container(color:[Link],height: 50,width: 50,child: Text('box3',style:
TextStyle(color: [Link]),),),
],),
SizedBox(height:50),
Stack(
alignment: [Link],
children: [
Container(color: [Link],height: 150,width: 150),
Positioned(
top: 30,
child: Container(color: [Link],height:100,width: 100),
),
Positioned(
bottom: 30,
child:Container(color:[Link],height: 50,width: 50), ),
],
),
],
),
),
)
);
}
}

3a)adapts to different screens


and b)implement media queries and breakpoints for responsiveness
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {


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

class ResponsiveHomePage extends StatelessWidget {


@override
Widget build(BuildContext context) {
var screenSize = [Link](context).[Link];

return Scaffold(
appBar: AppBar(
title: Text('Responsive UI'),
),
body: Center(
child: LayoutBuilder(
builder: (context, constraints) {
if (screenSize > 800) {
// Large screen
return Text('Large Screen View');
} else if (screenSize > 600) {
// Tablet screen
return Text('Tablet View');
} else {
// Mobile screen
return Text('Mobile View');
}
},
),
),
);
}
}
4a)navigation between screens
b) Navigation with named routes
import 'package:flutter/[Link]';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
initialRoute:'/',
routes: {
'/':(context)=>HomeScreen(),
'/about':(context)=>AboutScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('HomeScreen'),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
Text('Welcome'),
ElevatedButton(onPressed: (){
[Link](context,'/about');
}, child:Text('Go to About Screen')
)
],
),
),
);
}
}
class AboutScreen extends StatelessWidget{
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title:Text('About Screen'),
),
body:Center(
child:Column(
mainAxisAlignment: [Link],
children: [
Text('About Screen'),
ElevatedButton(onPressed: (){
[Link](context);
}, child: Text('Back')
)
],
)
)
);
}
}
5 a)stateful and stateless widgets
5b) Implement state management using set state and provider
import 'package:flutter/[Link]';
import 'package:provider/[Link]';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: ChangeNotifierProvider(
create: (_) => Counter(),
child: MyCApp(),
),
);
}
}

class Counter extends ChangeNotifier {


int _count = 0;
int get count => _count;

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

class MyCApp extends StatefulWidget {


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

class _MyCAppState extends State<MyCApp> {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Set State and Provider'),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
Text('${[Link]<Counter>().count}'),
ElevatedButton(
onPressed: () {
[Link]<Counter>().increment();
},
child: Text('Increment'),
),
],
),
),
);
}
}
6a)Create custom widgets for specific UI elements
6b)Apply styling using themes and custom styles
import 'package:flutter/[Link]';

void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
theme: ThemeData(primaryColor: [Link], textTheme: TextTheme(bodyLarge:
TextStyle(fontSize: 20))),
home: MyCustomApp(),
);
}
}
class MyCustomApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Custom Styling")),
body: Center(
child: ElevatedButton(
style: [Link](backgroundColor: [Link], padding:
[Link](16)),
onPressed: () {},
child: Text("Styled Button", style: [Link](context).[Link]),
),
),
);
}
}

7b) Implement form validation and error handling


import 'package:flutter/[Link]';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
home:MyForm(),
);
}
}
class MyForm extends StatelessWidget{
Widget build(BuildContext context){
final _formKey= GlobalKey<FormState>();
return Scaffold(
appBar: AppBar(title:Text('Form Validation')
),
body:Center(
child:Form(
key: _formKey,
child: Column(
children: [
TextFormField(decoration: InputDecoration(labelText: 'Name'),
validator: (value) => value!.isEmpty?'Name Required':null),
TextFormField(decoration:InputDecoration(labelText:'Email'),
validator: (value)=>value!.isEmpty||![Link]('@')?'Valid Email required':null),
ElevatedButton(onPressed: () => _formKey.currentState!.validate(), child:
Text('Submit')),

],
)
)
)
);
}
}
8 a) nd b)
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
bool show = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: GestureDetector(
onTap: () => setState(() => show = !show),
child: AnimatedOpacity(
opacity: show ? 1 : 0,//fade animation
duration: Duration(seconds: 5),
child: AnimatedSlide(//slide animation
offset: show ? Offset(0, 0) : Offset(1, 0),
duration: Duration(seconds: 5),
child: Container(
color: [Link],
height: 100,
width: 100,
),
),
),
),
),
),
);
}
}
9 ) a fetch data api
and b)display fetched data
import 'package:flutter/[Link]';
import 'package:http/[Link]' as http;
import 'dart:convert';

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

class ApiDataScreen extends StatefulWidget {


@override
_ApiDataScreenState createState() => _ApiDataScreenState();
}
class _ApiDataScreenState extends State<ApiDataScreen> {
List _data = [];
@override
void initState() {
fetchData();
[Link]();
}
fetchData() async {
var response = await [Link]([Link]('[Link]
setState(() => _data = [Link]([Link]));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar:AppBar(title:Text("exp-9")),
body: [Link](
itemCount: _data.length,
itemBuilder: (context, index) => Text(_data[index]['title'])
)
)
);
}
}

You might also like