Animations几个常用组件动画

页面打开动画

OpenContainer(
            transitionType: ContainerTransitionType.fade,
            openBuilder: (BuildContext context, VoidCallback _) {
              return const _DetailsPage();
            },// 打开的页面
            // onClosed: onClosed, // 关闭动作
            // tappable: false, // 动画打断
            closedBuilder: (BuildContext _, VoidCallback openContainer) {
              return InkWell(
                onTap: openContainer,
                child: FlutterLogo(size: 100),
              );
            }, // 关闭时的样子，需要一手势事件包裹
          )

淡出淡入切换页面动画

PageTransitionSwitcher(
        transitionBuilder: (
          Widget child,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
        ) {
          return FadeThroughTransition(
            animation: animation,
            secondaryAnimation: secondaryAnimation,
            child: child,
          );
        },
        child: pageList[pageIndex], // 页面更改时播放动画
      ),

共享方向轴的过渡

PageTransitionSwitcher(
          reverse: false,
          transitionBuilder: (
            Widget child,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) {
            return SharedAxisTransition(
              animation: animation,
              secondaryAnimation: secondaryAnimation,
              transitionType: SharedAxisTransitionType.horizontal!,
              child: child,
            );
          },
          child: page2(), // 页面改变，播放动画
        ),

样式不错的输入框

TextField(
                    decoration: InputDecoration(
                      suffixIcon: Icon(
                        Icons.visibility,
                        size: 20,
                        color: Colors.black54,
                      ),
                      isDense: true,
                      labelText: 'Email or phone number',
                      border: OutlineInputBorder(),
                    ),
                  ),

设置全局转场动画

MaterialApp(
      theme: ThemeData.from(
        colorScheme: const ColorScheme.light(),
      ).copyWith(
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.android: ZoomPageTransitionsBuilder(),
          },
        ),
      ),
      home: _TransitionsHomePage(),
    ),

预先准备

仓库地址

Read More

在 Grid 里添加

Read More

flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - assets/images/products/

加载整个目录的时候，如果资源目录是多级的，那么需要注册所有能够直达图片资源的路径

Read More

Fluter实用组件

FittedBox

Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.red,
              width: double.infinity,
              child: FittedBox(
                fit: BoxFit.scaleDown,
                child: Text(
                  'hello hell hel he h',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            )
          ],
        ),
      ),

DefaultTextStyle

DefaultTextStyle(
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.amber),
          child: Column(
            children: [
              Text('2222'),
              Text('2222'),
              Text('2222'),
              Text('2222'),
              Text('2222'),
            ],
          ),
        ),

InteractiveViewer（放大缩小）

InteractiveViewer(
          constrained: false,
          child: SizedBox(
            width: 800,
            child: Column(
              children: [
                Text('flutter hello' * 999),
              ],
            ),
          ),
        ),