Week-3
3a)ExplorevariousFlutterwidgets(Image,Container,etc.).
ImageWidget:
import'package:flutter/material.dart';
//functiontostartappbuilding
voidmain()=>runApp(constMyApp());
class MyApp extends StatelessWidget {
constMyApp({Key?key}):super(key:key);
//Thiswidget istheroot
//ofyourapplication
@override
Widgetbuild(BuildContext context){
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title: constText(
'InsertImageDemo',
),
),
body: Center(
child:Column(
children: <Widget>[
Image.asset('assets/images/output.gif',
height:200,
scale:2.5
// color: Color.fromARGB(255, 15, 147, 59),
opacity:
const
AlwaysStoppedAnimation<double>(0.5)), //Image.asset
Image.asset(
'assets/images/output.jpg', height:
400,
width:400,
),//Image.asset
],//<Widget>[]
),//Column
),//Center
),
);
}
}
ContainterWidget:
import'package:flutter/material.dart';
voidmain()=>runApp(constMyApp());
class MyApp extends StatelessWidget {
constMyApp({Key?key}):super(key:key);
@override
Widgetbuild(BuildContext context){
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:constText("Containerexample"),
),
body:Container(
height: 200,
width: double.infinity,
//color:Colors.purple,alignment:
Alignment.center, margin: const
EdgeInsets.all(20), padding: const
EdgeInsets.all(30), decoration:
BoxDecoration(
border:Border.all(color:Colors.black,width:3),
),
child:constText("Hello!iaminsideacontainer!",
style: TextStyle(fontSize: 20)),
),
),
);
}
}
Output:
3b)ImplementdifferentlayoutstructuresusingRow,ColumnWidget.
RowWidget
import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
return MaterialApp(
home:MyHomePage()
);
classMyHomePageextendsStatefulWidget{ @override
_MyHomePageStatecreateState()=>_MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widgetbuild(BuildContextcontext){
return Scaffold(
appBar:AppBar(
title:Text("FlutterRowExample"),
),
body:Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
Container(
margin: EdgeInsets.all(12.0),
padding:EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child:
Text("React.js",style:TextStyle(color:Colors.yellowAccent,fontSize:25),),
),
Container(
margin:EdgeInsets.all(15.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("Flutter",style:
TextStyle(color:Colors.yellowAccent,fontSize:25),),
),
Container(
margin: EdgeInsets.all(12.0),
padding:EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("MySQL",style:
TextStyle(color:Colors.yellowAccent,fontSize:25),),
),
);
}
Output:
ColumnWidget:
import'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:MyHomePage()
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageStatecreateState()=>_MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widgetbuild(BuildContextcontext){
return Scaffold(
appBar:AppBar(
title:Text("FlutterColumnExample"),
),
body:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("React.js",style:
TextStyle(color:Colors.yellowAccent,fontSize:20),),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("Flutter",style:
TextStyle(color:Colors.yellowAccent,fontSize:20),),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("MySQL",style:
TextStyle(color:Colors.yellowAccent,fontSize:20),),
)
]
),
);
}
}
Output:
