reference:
Flutter Common Layout Container Link
Add Link Description
Flutter Layout (1)-Detailed Container
Demo
Web address: Web demo
1. Create a project
flutter create example016_container
2. AS opens
Three. Add dependencies, put in resource files
Four. Writing code
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyAppLess());
}
class MyAppLess extends StatelessWidget {
// Flutter在构建页面时，会调用组件的build方法
// widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget）
// MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个widget。
// home 为Flutter应用的首页，它也是一个widget
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "计数器",
theme: new ThemeData(primarySwatch: Colors.blue),
home: new MyApp(),
routes: {
"example1": (context) => Example1Route(),
"example2": (context) => Example2Route(),
"example3": (context) => Example3Route(),
"example4": (context) => Example4Route(),
// "example1":(context) => Example1Route(),
},
);
}
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: new AppBar(title: new Text('ListView Widget')),
body: new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.perm_camera_mic),
title: new Text('例子1'),
trailing: new Icon(Icons.arrow_forward_ios),
onTap: () {
print("例子1");
Navigator.pushNamed(context, "example1");
},
),
new ListTile(
leading: new Icon(Icons.add_call),
title: new Text('例子2'),
trailing: new Icon(Icons.arrow_forward_ios),
onTap: () {
print("例子2");
Navigator.pushNamed(context, "example2");
},
),
new ListTile(
leading: new Icon(Icons.add_shopping_cart),
title: new Text('例子3'),
trailing: new Icon(Icons.arrow_forward_ios),
onTap: () {
print("例子2");
Navigator.pushNamed(context, "example3");
},
),
new ListTile(
leading: new Icon(Icons.add_shopping_cart),
title: new Text('例子4'),
trailing: new Icon(Icons.arrow_forward_ios),
onTap: () {
print("例子4");
Navigator.pushNamed(context, "example4");
},
),
],
),
),
);
}
}
// BoxConstraints forces an infinite width.
class Example1Route extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example1"),
),
body: Center(
child: new Container(
constraints: new BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
decoration: new BoxDecoration(
border: new Border.all(width: 2.0, color: Colors.red),
color: Colors.grey,
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
image: new DecorationImage(
image: new NetworkImage(
'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: new Text('Hello World',
style: Theme.of(context)
.textTheme
.display1
.copyWith(color: Colors.black)),
transform: new Matrix4.rotationZ(0.3),
)),
);
}
}
class Example2Route extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example1"),
),
body: Column(
children: [
Center(
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
),
Center(
child: Container(
width: 200.0,
height: 100.0,
color: Colors.red,
),
),
Container(
width: 150.0,
height: 150.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Text(
"Flutter",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
),
),
Container(
width: 150.0,
height: 150.0,
color: Colors.green,
alignment: Alignment(0.5, 0.5),
child: Text(
"Flutter",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
),
),
Container(
width: 150.0,
height: 150.0,
color: Colors.blue,
padding: EdgeInsets.only(top: 10.0, left: 10.0),
alignment: Alignment.topLeft,
child: Text(
"Flutter",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
),
),
Container(
width: 150.0,
height: 150.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Container(
width: 150.0,
height: 150.0,
color: Colors.black45,
margin: EdgeInsets.all(20.0),
),
)
],
));
}
}
class Example3Route extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example1"),
),
body: Center(
child: Container(
width: double.infinity,
height: double.infinity,
//color: Colors.red,
decoration: BoxDecoration(
color: Colors.blue,
),
),
));
}
}
class Example4Route extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example1"),
),
body: Column(
children: [
Container(
width: 100.0,
height: 100.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple, width: 6.0),
),
),
Container(
width: 100.0,
height: 100.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple, width: 6.0),
borderRadius: BorderRadius.all(Radius.circular(20.0))),
),
Container(
width: 100.0,
height: 100.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(-6.0, 6.0),
blurRadius: 6.0,
spreadRadius: 3.0)
],
shape: BoxShape.circle),
),
Container(
width: 100.0,
height: 100.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(colors: [
Colors.blue.withOpacity(1.0),
Colors.blue.withOpacity(0.9),
Colors.blue.withOpacity(0.8),
Colors.blue.withOpacity(0.7),
Colors.blue.withOpacity(0.6),
Colors.blue.withOpacity(0.5),
Colors.blue.withOpacity(0.4),
Colors.blue.withOpacity(0.3),
Colors.blue.withOpacity(0.2),
Colors.blue.withOpacity(0.1),
], begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
),
Container(
width: 100.0,
height: 100.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
gradient: RadialGradient(
center: const Alignment(0.0, 0.0), // near the top right
radius: 0.2,
colors: [
const Color(0xFFFFFF00), // yellow sun
const Color(0xFF0099FF), // blue sky
],
stops: [0.3, 1.0],
)),
),
],
));
}
}
// Navigator operation requested with a context that does not include a Navigator.
6. Debugging and running
Open the Android or iOS simulator in AS first, and click the run button.
Or run in the command line:
flutter run
7. Package the web
flutter build web
Source code
https://gitee.com/ruik2080/example-flutter