Flutter 1.17 新 Material motion 规范的预构建动画

animations: ^1.1.1

Container transform

GridView.builder(
  padding: EdgeInsets.all(8),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,crossAxisSpacing: 2,mainAxisSpacing: 4),itemBuilder: (context,index) {
    return OpenContainer(
      transitionDuration: _duration,closedBuilder: (BuildContext _,VoidCallback openContainer) {
        return Container(
          child: Image.asset(
            'assets/images/b.jpg',fit: BoxFit.fitWidth,),);
      },openBuilder: (BuildContext context,VoidCallback _) {
        return _DetailPage();
      },);
  },itemCount: 50,)

class _DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Container(
        width: double.infinity,height: double.infinity,child: Image.asset(
          'assets/images/b.jpg',fit: BoxFit.cover,);
  }
}

ListView.builder(
  itemBuilder: (context,VoidCallback openContainer) {
        return Card(
          child: Container(
            height: 45,alignment: Alignment.center,child: Text('$index'),)

Scaffold(
  body: _buildListView(),floatingActionButton: OpenContainer(
    openBuilder: (BuildContext context,VoidCallback _) {
      return _DetailPage();
    },transitionDuration: _duration,closedElevation: 6.0,closedShape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(50),closedColor: Theme.of(context).colorScheme.secondary,closedBuilder: (BuildContext context,VoidCallback openContainer) {
      return SizedBox(
        height: 50,width: 50,child: Center(
          child: Icon(
            Icons.add,color: Theme.of(context).colorScheme.onSecondary,);
    },)

Scaffold(
  appBar: AppBar(
    title: OpenContainer(
      transitionDuration: _duration,VoidCallback openContainer) {
        return Container(
          width: 300,height: 45,padding: EdgeInsets.only(left: 5),decoration: BoxDecoration(
              border: Border.all(color: Colors.grey.withOpacity(.5))),alignment: Alignment.centerLeft,child: Icon(Icons.search,color: Colors.black,)

Shared axis

@override
Widget build(BuildContext context) {
  Widget _child = _OnePage();
  switch (_currentIndex) {
    case 1:
      _child = _TwoPage();
      break;
  }
  return Scaffold(
    body: PageTransitionSwitcher(
      duration: const Duration(milliseconds: 1500),reverse: false,transitionBuilder: (
        Widget child,Animation<double> animation,Animation<double> secondaryAnimation,) {
        return SharedAxisTransition(
          child: child,animation: animation,transitionType: SharedAxisTransitionType.horizontal,secondaryAnimation: secondaryAnimation,child: _child,bottomNavigationBar: BottomNavigationBar(
      onTap: (int index) {
        setState(() {
          _currentIndex = index;
        });
      },currentIndex: _currentIndex,items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(title: Text('首页'),icon: Icon(Icons.home)),BottomNavigationBarItem(
            title: Text('我的'),icon: Icon(Icons.perm_identity)),],);
}

transitionType: SharedAxisTransitionType.vertical,

transitionType: SharedAxisTransitionType.scaled,

Fade through

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Fade through')),body: PageTransitionSwitcher(
      transitionBuilder: (
          Widget child,) {
        return FadeThroughTransition(
          animation: animation,child: child,child: pageList[pageIndex],bottomNavigationBar: BottomNavigationBar(
      currentIndex: pageIndex,onTap: (int newValue) {
        setState(() {
          pageIndex = newValue;
        });
      },items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.photo_library),title: Text('Albums'),BottomNavigationBarItem(
          icon: Icon(Icons.photo),title: Text('Photos'),BottomNavigationBarItem(
          icon: Icon(Icons.search),title: Text('Search'),);
}

1. 底部导航切换。
2. 刷新列表。
3. 切换器。

Fade

Scaffold(
  body: Center(
    child: RaisedButton(
      onPressed: () {
        showModal<void>(
          context: context,builder: (BuildContext context) {
            return AlertDialog(
              content: const Text('对话框'),actions: <Widget>[
                FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },child: const Text('取消'),FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },child: const Text('确定'),);
          },color: Theme.of(context).colorScheme.primary,textColor: Theme.of(context).colorScheme.onPrimary,child: const Text('弹出对话框'),)

1. dialog
2. menu
3. snackbar
4. FloatingActionButton