筆錄 Flutter (一) Container 、Text屬性、使用

Flutter練習demo

屬性

Container

Text

TextStyle

使用

import 'package:flutter/material.dart';
import 'ContainerPage.dart';
import 'TextPage.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    return ContainerPage();
    return TextPage();
  }
}

Text組件

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
          ),
          body: Center(
            child: Text(
              "Flutter Text屬性介紹Flutter Text屬性介紹Flutter",
              maxLines: 1,
//              textScaleFactor:3,
//              textAlign:TextAlign.right,
//              textDirection: TextDirection.ltr,
              overflow: TextOverflow.ellipsis,// text文字超出屏幕，省略號代替
              style: TextStyle(
                wordSpacing: 20, // 單詞間隙(如果是負值，會讓單詞變得更緊 湊
                letterSpacing:3,//字母間隙(如果是負值，會讓字母變得更緊 湊)
                decoration:TextDecoration.underline,//下劃線
                decorationColor: Colors.black,// 下劃線顏色
                decorationStyle: TextDecorationStyle.wavy,// 波浪線
                color: Colors.red,
                fontSize: 20,
                fontStyle: FontStyle.italic, // 斜體
                fontWeight: FontWeight.bold, // 加粗
              ),

            ),
          )),
    );
  }
}

Container組件

import 'package:flutter/material.dart';

class ContainerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
          ),
          body: Center(
              child: Container(
                transform: Matrix4.rotationX(0.2),//繞X軸旋轉

//            margin: EdgeInsets.all(20), // 外部有其他組件方便觀察 ，跟xml佈局中的margin一個意思
                padding: EdgeInsets.only(left: 20),
                alignment: Alignment.center,// 對齊方式

                decoration: BoxDecoration(
                  // 盒子裝飾
                    boxShadow: [
                      //陰影位置由offset決定,陰影模糊層度由blurRadius大小決定（大就更透明更擴散），陰影模糊大小由spreadRadius決定
                      BoxShadow(
                          color: Color(0x00EEee00f0),
//                      offset: Offset(2,2),
                          blurRadius: 10,
                          spreadRadius: 2),
                    ],
//                  環形渲染
//                    gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror),
                    //掃描式漸變
//                    gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14),
                   // 線性漸變
                    gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 1), end: FractionalOffset(0, 1)),


                    color: Colors.cyan,
                    border: Border.all(
                      //  邊框線
                        color: Colors.black,
                        width: 4 // 設置邊框線的寬度
                    ),
//                borderRadius:BorderRadius.all(Radius.circular(50))//圓角 4個角
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(30),
                        topRight: Radius.circular(30)) // 指定某個角設置圓角
                ),
                child: Text(
                  "Container容器中的文字",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 30,
                    fontStyle: FontStyle.italic, // 斜體
                    fontWeight: FontWeight.bold, // 加粗
                  ),
                ),
                width: 300,
                height: 300,
              )),
        ));
  }

}