码迷,mamicode.com
首页 > 其他好文 > 详细

flutter 毛玻璃

时间:2020-01-11 18:42:22      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:box   img   tps   widget   代码   display   aci   key   效果   

代码:

import ‘package:flutter/material.dart‘;
import ‘dart:ui‘;//过滤器组件

class MaoBaoLi extends StatelessWidget {
const MaoBaoLi({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ConstrainedBox(
//约束条件
constraints: const BoxConstraints.expand(),//随着里面的东西扩展
child: Image.network(‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578312966654&di=09a975b6c05a1447fc6f8aeae463cf41&imgtype=0&src=http%3A%2F%2Fp2.qhimgs4.com%2Ft0128307802c64fd817.jpg‘),
),//约束性盒子,添加额外的约束条件 约束在child 上
Center(
//可裁切的矩形
child: ClipRect(
//背景过滤器
child: BackdropFilter(
//图片过滤器
filter: ImageFilter.blur(sigmaX:5.0 ,sigmaY: 5.0),
//透明度
child: Opacity(opacity: 0.5,child: Container(
width: 500.0,
height: 700.0,
decoration: BoxDecoration(color: Colors.orange.shade200),//盒子修饰器
child: Center(
child: Text(‘嵌套真多‘,style: Theme.of(context).textTheme.display2,),//字体皮肤---就是字号的区别
 
),
),),
),


),
)
],
 

),//层叠组件
);
}
}
总结:

毛玻璃

 

图片过滤器

filter:ImageFilter.blur//模糊效果

stack()//层叠组件

flutter 毛玻璃

标签:box   img   tps   widget   代码   display   aci   key   效果   

原文地址:https://www.cnblogs.com/pp-pping/p/12180379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!