(Prac3-ALL)Design a mobile app to implement different layouts
Single child widget
1)container
2)Sizedbox
3)Padding
4)Center
5)Align
(Used all Widgets in a single code below,except align and sizedbox)
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Practical 3A'),
backgroundColor: Color.fromARGB(255, 251, 17, 0)),
body: Center(
//centering the container
child: Padding(
padding: EdgeInsets.all(10),
child: SizedBox(
//enforcing the sized box height and width on containers height and width
height: 200,
width: 200,
child: Container(
//container
width: 100,
height: 100,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.lime, Colors.black],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Center(
child: Text('425_Devesh_Ghadigaonkar',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.center),
),
),
),
),
),
),
),
);
}
Multiple child widget
1)column
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Practical 3B'),
backgroundColor: Color.fromARGB(255, 234, 124, 7)
),
body : Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children:[
Container(
child: const Text('425_Devesh',textAlign: TextAlign.center,style: TextStyle(fontSize: 18),),
width: 200,
height:200,
//color:Colors.amber,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors:[Colors.orange,Colors.white,Colors.green],
begin:Alignment.topLeft,
end:Alignment.bottomRight,
),
),
),
Container(
child: const Text('Ghadigaonkar',textAlign: TextAlign.center,style: TextStyle(fontSize: 18),),
width: 200,
height:200,
//color:Colors.amber,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors:[Colors.orange,Colors.white,Colors.green],
begin:Alignment.topLeft,
end:Alignment.bottomRight,
),
),
),
],
),
),
),
),
);
}
2)Column
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Practical 3B'),
backgroundColor: Color.fromARGB(255, 0, 177, 241)
),
body : Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children:[
Container(
child: const Text('425_Devesh',textAlign: TextAlign.center,style: TextStyle(fontSize: 20),),
width: 200,
height:200,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors:[Colors.orange,Colors.white,Colors.green],
begin:Alignment.topLeft,
end:Alignment.bottomRight,
),
),
),
Container(
child: const Text('Ghadigaonkar',textAlign: TextAlign.center,style: TextStyle(fontSize: 20),),
width: 200,
height:200,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors:[Colors.orange,Colors.white,Colors.green],
begin:Alignment.topLeft,
end:Alignment.bottomRight,
),
),
),
],
),
),
),
),
);
}
3)Expanded
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body:Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children:[
Expanded(
child: Container(
color: const Color.fromARGB(255, 251, 19, 3),
width:100,
height:100,
child: const Text('Roll No. 425',textAlign: TextAlign.center,style:TextStyle(fontSize: 20)),
),
),
Align(
alignment: Alignment.center,
child:Container(
color: Color.fromARGB(255, 251, 251, 0),
width:100,
height:100,
child: const Text('Devesh',textAlign: TextAlign.center,style:TextStyle(fontSize: 20)),
),
),
Expanded(
child: Container(
color: Colors.blue,
width:100,
height:100,
child: const Text('Ghadigaonkar',textAlign: TextAlign.center,style:TextStyle(fontSize: 20)),
),
),
]
),
),
),
),
);
}
4)Listview
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body:Center(
child: ListView(
children:[
Container(
color:Colors.green,
width:200,
height:300,
child: Text('Roll No. 425',textAlign: TextAlign.center,),
),
Container(
color:Colors.lightGreenAccent,
width:200,
height:200,
child: Text('Devesh',textAlign: TextAlign.center,),
),
Container(
color:Colors.cyanAccent,
width:200,
height:300,
child:Text('Ghadigaonkar',textAlign: TextAlign.center,),
),
]
),
),
),
),
);
}
5)Gridview
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4 ),
children: [
Container(
color: Colors.amber,
width: 300,
height: 300,
child: Text('Roll No. 425'),
),
Container(
color: Color.fromARGB(255, 2, 222, 238),
width: 300,
height: 300,
child: Text('Devesh'),
),
Container(
color: Color.fromARGB(255, 239, 249, 44),
width: 300,
height: 300,
child: Text('Ghadigaonkar'),
),
Container(
color: Color.fromARGB(255, 41, 252, 4),
width: 300,
height: 300,
child: Text('hello'),
),
Container(
color: Color.fromARGB(255, 134, 78, 225),
width: 300,
height: 300,
child: Text('hello'),
),
],
),
))));
}
6)Stack
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body:Center(
child: Stack(
alignment: Alignment.bottomCenter,
children:[
Container(
color:Colors.green,
width:300,
height:300,
child: Text('425',style: TextStyle(fontSize: 20),),
),
Container(
color:Colors.lightGreenAccent,
width:200,
height:200,
child: Text('Devesh',style: TextStyle(fontSize: 20)),
),
Container(
color:Colors.amber,
width:100,
height:150,
child:Text('Ghadigaonkar',style: TextStyle(fontSize: 20)),
),
]
),
),
),
),
);
}
Comments
Post a Comment