一、Container和Text

void main() {
  // runApp(const MyApp());
  runApp(new MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child:Container(
          child: Text(
              "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
            textAlign: TextAlign.left,
            overflow: TextOverflow.fade,
            textScaleFactor: 2,
            maxLines: 1,
            style: TextStyle(
              fontSize: 16.0,
              color: Colors.red,
              fontWeight: FontWeight.w900,
              fontStyle: FontStyle.italic,
              decoration: TextDecoration.lineThrough
            ),
          ),
          height: 300.0,
          width: 300.0,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(
              color: Colors.blue,
              width: 2.0,
            ),
            borderRadius: BorderRadius.all(Radius.circular(20.0))
          ),
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.fromLTRB(20,10,20,10),
          // transform: Matrix4.translationValues(100, 0, 0),
          transform: Matrix4.rotationZ(-0.3),

        )
    );
  }
}

一、圖片組件

Image.asset 本地圖片
Image.network 遠程圖片

遠程圖片、圖片圓角

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child:Container(
          child:ClipOval(
            child: Image.network(
              "https://upload-images.jianshu.io/upload_images/27205827-7890737d4be16e42.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1080/format/webp",
              alignment: Alignment.bottomRight,
              color: Colors.blue,
              colorBlendMode: BlendMode.screen,
              fit: BoxFit.cover,
              repeat: ImageRepeat.repeat,
            ),
          ),
          width: 300,
          height: 300,
          decoration: BoxDecoration(
              color: Colors.yellow
          ),
        ),

    );
  }
}

本地圖片

2.0x和3.0x是必須的

image.png

然后打開pubspec.yaml聲明一下添加的圖片文件，注意要配置對

image.png

child: Image.asset("images/a.jpeg",)