一柜去、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 遠(yuǎn)程圖片

遠(yuǎn)程圖片、圖片圓角

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",)