Flutter Widget之Container

Widget:https://flutter.io/docs/development/ui/widgets
Container:https://docs.flutter.io/flutter/widgets/Container-class.html

import 'package:flutter/material.dart';

class ContainerDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ContainerDemoPageState();
}

class _ContainerDemoPageState extends State<ContainerDemoPage> {
  @override
  Widget build(BuildContext context) {
    Expanded imageExpanded(String img) {
      return new Expanded(child: new Container(
        decoration: new BoxDecoration(
            border: new Border.all(width: 10.0, color: Colors.black38),
            borderRadius: const BorderRadius.all(
                const Radius.circular(8.0))),
        margin: const EdgeInsets.all(4.0),
        child: new Image.asset(img),
      ));
    }

    var container = new Container(
      decoration: new BoxDecoration(color: Colors.black26),
      child: new Column(
        children: <Widget>[
          new Row(children: <Widget>[
            imageExpanded('images/lion.jpg'),
            imageExpanded('images/parrot.jpg'),
          ],),
          new Row(children: <Widget>[
            imageExpanded('images/dog.jpg'),
            imageExpanded('images/cat.jpg'),
          ],),
          new Row(children: <Widget>[
            imageExpanded('images/husky.jpg'),
          ],)
        ],
      ),
    );

    return new Scaffold(
      appBar: new AppBar(title: new Text('Container Page Demo'),),
//      body: new SingleChildScrollView(
//        child: new Center(
//          child: container,
//        ),
//      )

      body: Center(
//      child: Container(
//        margin: const EdgeInsets.all(10.0),
//        color: const Color(0xFF00FF00),
//        width: 48.0,
//        height: 48.0,
//      ),
        child: Container(
          constraints: BoxConstraints.expand(
            height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
          ),
          padding: const EdgeInsets.all(8.0),
          color: Colors.teal.shade700,
          alignment: Alignment.center,
          child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
          foregroundDecoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('http://www.appblog.com/css/images/logo128.jpg'),
              centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
          transform: Matrix4.rotationZ(0.1),
        )
      ),
    );
  }
}

Flutter Widget Container

上一篇 Dart中的函数式编程
下一篇 Flutter Widget之Row
目录
文章列表
1 Android开发小技巧整理
Android开发小技巧整理
2
微信小程序日期时间选择器
微信小程序日期时间选择器
3
PHPMailer解决OpenCart发送邮件不成功
PHPMailer解决OpenCart发送邮件不成功
4
前端 crypto-js 3DES 加解密
前端 crypto-js 3DES 加解密
5
Android引用Library的若干问题
Android引用Library的若干问题
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。