Flutter组件

两个常用的组件：Material和Scaffold润饰App和H5相同很固定。

1.Container

2.Text

3.picture

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    //从下面提取上来了
    const text = Text("Flutter  Center-container-child",
        style: TextStyle(
          color: Color.fromARGB(255, 168, 32, 23),
          height: 15,
          fontSize: 20,
          //假如我要设置这一行字在某个方位？？？怎么设置
          //处理：运用上面的alignment能够装备
        ));
    var container = Container(
      alignment: Alignment.center, //装备Container内元素的方位
      width: 330,
      height: 300,
      decoration: BoxDecoration(
        color: Color.fromARGB(255, 28, 188, 202),
        border: Border.all(color: Color.fromARGB(255, 243, 145, 33), width: 5),
        borderRadius: BorderRadius.circular(100), //运用的圆角是关于四个圆角的半径
        //暗影
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            blurRadius: 15.0,
          )
        ],
        //突变色彩    RadialGradient  径向突变（中心向外突变）
        // gradient: const LinearGradient(
        //   colors: [Colors.red, Colors.green],
        // )
        // gradient:RadialGradient(
        //   colors: [Colors.red,Colors.green],
        //   radius: 0.4
        // )
      ),
      child: text,
    );
    return Center(child: container);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return button01();
  }

  Container button01() {
    return Container(
      //和上面的组件距离
      // margin: EdgeInsets.all(10),
      margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
      //内距离，，，bt我觉得alignment更好用
      // padding: EdgeInsets.fromLTRB(40, 0, 0, 0),
      alignment: Alignment.center,
      width: 200,
      height: 40,
      //对组件进行平移和旋转
      // transform: Matrix4.translationValues(0, 0, 0),
      //旋转
      transform: Matrix4.rotationZ(0.6),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(15),
      ),
      child:const Text(
        "My button",
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    );
  }
}