Flutter学习第2章 Container Widget 容器组件的使用（2）

1、基本结构

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "组件学习",
      home: Scaffold(
        body: Center(
            child: Container(
              child: new Text(
                "Hello Container 组件",
                style: TextStyle(
                  fontSize: 40.0,
                ),
              ),
              alignment: Alignment.topLeft,//对齐方式
              width: 500.0,
              height: 400.0,
              //color: Colors.lightBlueAccent,//设置背景颜色
             // padding: const EdgeInsets.all(20.0),//设置上下左右边距
             padding:const EdgeInsets.fromLTRB(20, 0, 0, 0),
             margin: const EdgeInsets.fromLTRB(30,0,0,0),//设置外边距
             decoration: new BoxDecoration(
               gradient: const  LinearGradient(
                 colors: [Colors.lightGreen,Colors.orangeAccent,Colors.pink]//渐变背景色
              
               ),
               border: Border.all(width: 5.0,color:Colors.orange)//容器边框设置
             ),
            ),
        
        ),
           ),
    );
  }
}

2、效果展示

3、属性解释

decoration: new BoxDecoration(
               gradient: const  LinearGradient(
                 colors: [Colors.lightGreen,Colors.orangeAccent,Colors.pink]//渐变背景色
              
               ),

 border: Border.all(width: 5.0,color:Colors.orange)//容器边框设置