View video tutorial
FLUTTER Container widget
FLUTTER
This tutorial will show how to use Container widget in Flutter.
Example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Title"),
),
body: Container(
width: 500,
height: 200,
color: Colors.green,
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
alignment: Alignment.bottomRight,
//child: Center(
child: Text(
"Body Text, in the container widget decoration box",
style: TextStyle(
//color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
color: Colors.white),
),
//),
),
);
}
}
Output should look like this.
Example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Title"),
),
body: Container(
width: 500,
height: 200,
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
//alignment: Alignment.bottomRight,
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 3),
borderRadius: BorderRadius.circular(8),
boxShadow: [
new BoxShadow(
color: Colors.pink,
offset: new Offset(5.0, 6.0),
),
],
),
child: Center(
child: Text(
"Body Text, in the container widget decoration box",
style: TextStyle(
//color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
color: Colors.white),
),
),
),
);
}
}
Output should look like this.
Example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Title"),
),
body: Container(
width: 500,
height: 200,
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
//alignment: Alignment.bottomRight,
transform: Matrix4.rotationZ(0.1),
//constraints: BoxConstraints.expand(height: 120.0, width: 500.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 3),
borderRadius: BorderRadius.circular(8),
boxShadow: [
new BoxShadow(
color: Colors.pink,
offset: new Offset(5.0, 6.0),
),
],
),
child: Center(
child: Text(
"Body Text, in the container widget decoration box",
style: TextStyle(
//color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
color: Colors.white),
),
),
),
);
}
}
Output should look like this.
Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.
For documentation: visit dart documentation. visit flutter documentation.
Try Dart and Flutter Here or Here