flutter-container-容器

//必须有封号  material就是个UI 
import 'package:flutter/material.dart';
//这是个主函数入口
void main()=>runApp(MyApp());
// 也可以这么写
// void main(){
//   runApp(MyApp())
// }

// 声明MyApp类
class MyApp extends StatelessWidget{
  // 重写build
  @override
  Widget build(BuildContext context){
    //返回一个Material风格的App
    return MaterialApp(
      title:'Welcome to Flutteraa',
      home: Scaffold(
        // 在主题的中间区域,添加一个文本  Center:屏幕的中间
        body: Center(
          child: Container(
            child: Text("学习container",
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
              style: TextStyle(
                fontSize: 25.0,
                color: Colors.blue[300],
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid,
                decorationColor: Colors.blue[100],
                fontWeight: FontWeight.w700
              ),
            ),
            width: 200.0,
            height: 150.0,
            // 有decoration 就不能用color 相互冲突
            // color: Colors.red[50],

            //container里的对齐方式
            alignment: Alignment.topLeft,
            // 内边距  返回常量  所以要const
            padding: const EdgeInsets.fromLTRB(20.0, 30.0, 0.0 , 0.0),
            // 外边距
            //  margin: const EdgeInsets.all(10.0),
            decoration: BoxDecoration( //背景装饰
              gradient:LinearGradient(colors: [Colors.red,Colors.orange[700]]),
              borderRadius: BorderRadius.circular(3.0),
              boxShadow: [
                BoxShadow(color: Colors.black54,offset: Offset(2.0,2.0),blurRadius: 4.0)
              ]
            ),
            //卡片倾斜
            transform: Matrix4.rotationZ(.2),
          ),
        ),
      ),
    );
  }
}

最终效果

 

posted on 2020-07-02 11:37  秃了头也不退休  阅读(145)  评论(0编辑  收藏  举报

导航