1.Container组件

案例:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("你好Flutter"),
      ),
      body:Column(
        children: const [
          MyApp(),
          MyButton()
        ],
      ),
    ),
  ));
}

自定义我的容器 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment:Alignment.center ,//配置Container容器内元素的方位
        width: 200,
        height: 200,
        decoration: BoxDecoration(        
          color: Colors.yellow,//设置Container容器的背景颜色
          border: Border.all(//配置边框
            color: Colors.red,//设置边框的颜色
            width: 2,//设置边框的宽度
          ),
          borderRadius: BorderRadius.circular(10),//设置圆角,也可以实现圆形
          boxShadow:const [//设置阴影效果
            BoxShadow(
            color: Colors.black,
            blurRadius: 30.0,

          )],

          /*
          LinearGradient:线性渐变
          RadialGradient:径向渐变
          */
          gradient: const LinearGradient(//设置背景色渐变
            colors: [
              Colors.red,Colors.yellow
            ]
          ),

        ),
        child: const Text(//Container容器内添加文字
          "你好Flutter",
          style: TextStyle(
            color: Colors.white,//设置文字的背景颜色
            fontSize: 20.0,//设置文字的大小
          ),
        ),
      ),
    );
  }
}

自定义按钮 

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 200,
      height: 40,
      margin:const EdgeInsets.all(10),//设置居上的边距
      decoration: BoxDecoration(
        color: Colors.blue,//设置容器的背景颜色
        borderRadius: BorderRadius.circular(10),//设置容器的圆角
      ),
      child: const Text("按钮",style: TextStyle(
        color: Colors.white,
        fontSize: 20,
      ),),
    );
  }
}

效果图:

 2.Text组件

TextStyle的相关属性