flutter widget

目录

• AnimatedContainer Container动画
• Overlay 自定义弹窗 悬浮窗
• Hero 页面过渡动画
• BackdropFilter 高斯模糊

AnimatedContainer Container动画

AnimatedContainer(
  // Use the properties stored in the State class.
   _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
  // Define how long the animation should take.
  duration: Duration(seconds: 1),
  // Provide an optional curve to make the animation feel smoother.
  curve: Curves.fastOutSlowIn,
);

Overlay 自定义弹窗 悬浮窗

意思是Overlay是一个Stack组件，可以将OverlayEntry插入到Overlay中，使其独立的child窗口悬浮于其它组件之上，利用这个特性可以自定义弹窗或者悬浮窗

  OverlayEntry entry = OverlayEntry(builder: (context) {
      return Positioned(
        top: 64,
        left: 0,
          child: Material(
            color: Colors.white,
            child: Container(
              height: 40,
               MediaQuery.of(context).size.width,
             color: Colors.orange,
              alignment: Alignment.center,
              child: Text('我是弹窗'),
            ),
          ));
    });
    Overlay.of(context).insert(entry);
    Future.delayed(Duration(seconds: 2)).then((res) {
      entry.remove();
    });

Hero 页面过渡动画

Hero的使用非常的简单，需要关联的两个组件用Hero组件包裹，并指定相同的tag参数,代码如下：

///列表item
InkWell(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Hero(
          tag: widget.data,
          child: LoadImage(
            '${widget.data.img}',
             81.0,
            height: 81.0,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => GoodsDetailsPage(data: widget.data)));
      },
    );
///详情
 Hero(
    tag: tag,
    child: LoadImage(
        imageUrl,
         double.infinity,
        height: 300,
        fit: BoxFit.cover,
        ),
    )

BackdropFilter 高斯模糊

ClipRect(
    BackdropFilter(
        filter: ImageFilter.blur(sigmaX, sigmaY),
        child: ...)
)