组件装饰和视觉效果

• Opacity(透明度处理)
• DecoratedBox（装饰盒子）
• RotateBox旋转盒子
• Clip(剪裁处理)
• 自定义面板案例

不透明度示例

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Opacity不透明示例'),
      ),
      body: new Center(
        child: new Opacity(
          opacity: 0.3, //不透明度设置为0.3
          child: new Container(
            width: 250.0,
            height: 100.0,
            decoration: new BoxDecoration(
              color: Colors.black, //背景色设置为纯黑
            ),
            child: Text(
              '不透明度为0.3',
              style: TextStyle(
                color: Colors.white,
                fontSize: 28.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'Opacity不透明示例',
    home: new LayoutDemo(),
  ));
}

DecoratedBox装饰盒子---添加背景图片

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('BoxDecoration装饰盒子背景图示例'),
      ),
      body: new Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
            color: Colors.grey,
            image: DecorationImage(
              image: ExactAssetImage('images/2.0x/2.jpg'),
              fit: BoxFit.cover, //填充类型
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'BoxDecoration装饰盒子背景图示例',
    home: new LayoutDemo(),
  ));
}

DecoratedBox装饰盒子---边框圆角处理

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('BoxDecoration装饰盒子边框示例'),
      ),
      body: new Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
            color: Colors.white,
            //添加所有的边框，处理颜色为灰色，宽度4.0
            border: Border.all(color: Colors.grey, width: 4.0),
            //添加边框弧度，这样会有一个圆弧效果
            borderRadius: BorderRadius.circular(36.0),
            image: DecorationImage(
              image: ExactAssetImage('images/2.0x/2.jpg'),
              fit: BoxFit.cover, //填充类型
            ),
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(new MaterialApp(
    title: 'BoxDecoration装饰盒子边框示例',
    home: new LayoutDemo(),
  ));
}

边框阴影示例

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('BoxDecoration装饰盒子背景图示例'),
      ),
      body: new Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
            color: Colors.white,
            //边框阴影效果
            boxShadow: <BoxShadow>[
              new BoxShadow(
                color: Colors.grey, //阴影颜色
                blurRadius: 8.0, //模糊值
                spreadRadius: 8.0, //扩展阴影半径
                offset: Offset(-1.0, 1.0),
              ),
            ],
          ),
          child: Text(
            'BoxShow引用效果',
            style: TextStyle(
              color: Colors.black,
              fontSize: 28.0,
            ),
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(new MaterialApp(
    title: 'BoxDecoration---边框阴影示例',
    home: new LayoutDemo(),
  ));
}

线性渐变效果

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('LinearGradient线性渐变效果'),
      ),
      body: new Center(
        child: new DecoratedBox(
          decoration: new BoxDecoration(
            gradient: new LinearGradient(
              begin: const FractionalOffset(0.5, 0.0), //起始偏移量
              end: const FractionalOffset(1.0, 1.0), //终止偏移量
              //渐变颜色数据集
              colors: <Color>[
                Colors.red,
                Colors.green,
                Colors.blue,
                Colors.grey,
              ],
            ),
          ),
          child: new Container(
            width: 280.0,
            height: 280.0,
            child: new Center(
              child: Text(
                'LinearGradient线性渐变效果',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 28.0,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'LinearGradient线性渐变效果',
    home: new LayoutDemo(),
  ));
}