Flutter 浅析之 Container容器

技术无止境，只怕不学习啊，Flutter我们开始吧

Flutter Container容器
在Container容器添加Text文本以及字体大写

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
          ),
        ),
      ),
    );
  }
}

Alignment子空间的对齐方式

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
            alignment: Alignment.topLeft, // 字内容的对齐方式 center居中，centerLeft居中左侧 centerRight居中右侧
            // bottomCenter 下居中对齐 ，bottomLeft 下左对齐，bottomRight 下右对齐
            // topCenter 上居中对齐，topLeft 上左对齐，topRight 上右对齐
          ),
        ),
      ),
    );
  }
}

Container容器的高度宽度 以及背景色

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
            alignment: Alignment.topLeft, // 字内容的对齐方式 center居中，centerLeft居中左侧 centerRight居中右侧
            // bottomCenter 下居中对齐 ，bottomLeft 下左对齐，bottomRight 下右对齐
            // topCenter 上居中对齐，topLeft 上左对齐，topRight 上右对齐
            width: 500,   // 宽
            height: 400,  // 高
            color: Colors.red, //颜色   color和decoration不可以同时存在
          ),
        ),
      ),
    );
  }
}

Container内边距 padding

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
            alignment: Alignment.topLeft, // 字内容的对齐方式 center居中，centerLeft居中左侧 centerRight居中右侧
            // bottomCenter 下居中对齐 ，bottomLeft 下左对齐，bottomRight 下右对齐
            // topCenter 上居中对齐，topLeft 上左对齐，topRight 上右对齐
            width: 500,   // 宽
            height: 400,  // 高
            color: Colors.red, //颜色   color和decoration不可以同时存在
            padding: const EdgeInsets.fromLTRB(20.0,20.0,20.0,20.0), // 边距 all 包括上下左右  fromLTRB 上下左右分别设置边距fromLTRB(20.0,20.0,20.0,20.0)
          ),
        ),
      ),
    );
  }
}

Container外边距margin

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
            alignment: Alignment.topLeft, // 字内容的对齐方式 center居中，centerLeft居中左侧 centerRight居中右侧
            // bottomCenter 下居中对齐 ，bottomLeft 下左对齐，bottomRight 下右对齐
            // topCenter 上居中对齐，topLeft 上左对齐，topRight 上右对齐
            width: 500,   // 宽
            height: 400,  // 高
            color: Colors.red, //颜色   color和decoration不可以同时存在
            padding: const EdgeInsets.fromLTRB(20.0,20.0,20.0,20.0), // 边距 all 包括上下左右  fromLTRB 上下左右分别设置边距fromLTRB(20.0,20.0,20.0,20.0)
            margin: const EdgeInsets.all(30.0), // 外间距
          ),
        ),
      ),
    );
  }

Container渐变色decoration

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
            alignment: Alignment.topLeft, // 字内容的对齐方式 center居中，centerLeft居中左侧 centerRight居中右侧
            // bottomCenter 下居中对齐 ，bottomLeft 下左对齐，bottomRight 下右对齐
            // topCenter 上居中对齐，topLeft 上左对齐，topRight 上右对齐
            width: 500,   // 宽
            height: 400,  // 高
//            color: Colors.red, //颜色   color和decoration不可以同时存在
            padding: const EdgeInsets.fromLTRB(20.0,20.0,20.0,20.0), // 边距 all 包括上下左右  fromLTRB 上下左右分别设置边距fromLTRB(20.0,20.0,20.0,20.0)
            margin: const EdgeInsets.all(30.0), // 外间距
            decoration: new BoxDecoration( // 渐变
              gradient: const LinearGradient(
                  colors:
                  [Colors.lightBlue,Colors.greenAccent,Colors.purple],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Container边框border

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              "Hello xinge", // 文字内容
              style: TextStyle(fontSize: 40.0), // 字体样式 字体大小
            ),
            alignment: Alignment.topLeft, // 字内容的对齐方式 center居中，centerLeft居中左侧 centerRight居中右侧
            // bottomCenter 下居中对齐 ，bottomLeft 下左对齐，bottomRight 下右对齐
            // topCenter 上居中对齐，topLeft 上左对齐，topRight 上右对齐
            width: 500,   // 宽
            height: 400,  // 高
//            color: Colors.red, //颜色   color和decoration不可以同时存在
            padding: const EdgeInsets.fromLTRB(20.0,20.0,20.0,20.0), // 边距 all 包括上下左右  fromLTRB 上下左右分别设置边距fromLTRB(20.0,20.0,20.0,20.0)
            margin: const EdgeInsets.all(30.0), // 外间距
            decoration: new BoxDecoration( // 渐变
              gradient: const LinearGradient(
                  colors:
                  [Colors.lightBlue,Colors.greenAccent,Colors.purple],
              ),
              border: Border.all(width: 5.0,color: Colors.red),  // 边框
            ),
          ),
        ),
      ),
    );
  }
}

Container 到此为止，其他的大家可以自行查询API