Flutter-03 Container、Text、Image

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