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,
        ),
      ),
    );
  }
}

本文來自博客園，作者：七七喜歡你，轉載請註明原文鏈接：https://www.cnblogs.com/EternalX/p/18050772