Flyter 1.17 pre built animation for the new material motion specification

Time:2021-9-8

Flyter 1.17 pre built animation for the new material motion specification

Lao Meng: at the flutter 1.17 release conference, the flutter team also released a new animations software package, which provides pre built animation to realize the new material motion specification.

Package pub address:https://pub.dev/packages/animations

Material motion specification:https://material.io/design/motion/the-motion-system.html

To import a plug-in, please check the latest version number on the pub:

animations: ^1.1.1

Container transform

The container transformation pattern is designed for transformations between UI elements that contain containers. This pattern creates a visible connection between two UI elements.

Case: build a GridView and click one of them to jump to the expiration details page:

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,
)

useOpenContainerComponent. Closedbuilder means to the component when it is closed. Here it means GridView item. Openbuilder means to click the page to jump to. Here it means the details page.

The detailed page code is as follows:

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,
        ),
      ),
    );
  }
}

Flyter 1.17 pre built animation for the new material motion specification

Build listview

ListView.builder(
  itemBuilder: (context, index) {
    return OpenContainer(
      transitionDuration: _duration,
      closedBuilder: (BuildContext _, VoidCallback openContainer) {
        return Card(
          child: Container(
            height: 45,
            alignment: Alignment.center,
            child: Text('$index'),
          ),
        );
      },
      openBuilder: (BuildContext context, VoidCallback _) {
        return _DetailPage();
      },
    );
  },
  itemCount: 50,
)

Flyter 1.17 pre built animation for the new material motion specification

It can also be a button, such as floatingactionbutton

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,
          ),
        ),
      );
    },
  ),
)

Flyter 1.17 pre built animation for the new material motion specification

Top input box

Scaffold(
  appBar: AppBar(
    title: OpenContainer(
      transitionDuration: _duration,
      closedBuilder: (BuildContext _, 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,),
        );
      },
      openBuilder: (BuildContext context, VoidCallback _) {
        return _DetailPage();
      },
    ),
  ),
)

Flyter 1.17 pre built animation for the new material motion specification

Shared axis

The shared axis pattern is used for transitions between UI elements with spatial or navigation relationships. This mode uses shared transformations on the X, y, or Z axis to strengthen the relationship between elements.

Bottom navigation case:

@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 ('home '), Icon: icon (icons. Home)),
        BottomNavigationBarItem(
            Title: text ('My '), Icon: icon (icons. Perm)_ identity)),
      ],
    ),
  );
}

Flyter 1.17 pre built animation for the new material motion specification

Type is Y-axis:

transitionType: SharedAxisTransitionType.vertical,

Flyter 1.17 pre built animation for the new material motion specification

The type is z-axis:

transitionType: SharedAxisTransitionType.scaled,

Flyter 1.17 pre built animation for the new material motion specification

Fade through

The fade pattern is used for transitions between UI elements that are not closely related to each other.

The following cases are from the official Demo:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Fade through')),
    body: PageTransitionSwitcher(
      transitionBuilder: (
          Widget child,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          ) {
        return FadeThroughTransition(
          animation: animation,
          secondaryAnimation: secondaryAnimation,
          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'),
        ),
      ],
    ),
  );
}

Flyter 1.17 pre built animation for the new material motion specification

The effect applies to:

  1. Bottom navigation toggle.
  2. Refresh the list.
  3. Switcher.

Fade

Fade in and fade out mode is used to enter or exit UI elements within the scope of the screen, such as a dialog box that fades in and out in the center of the screen.

Pop up dialog box case:

Scaffold(
  body: Center(
    child: RaisedButton(
      onPressed: () {
        showModal<void>(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              Content: const text ('dialog '),
              actions: <Widget>[
                FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  Child: const text ('cancel '),
                ),
                FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  Child: const text ('ok '),
                ),
              ],
            );
          },
        );
      },
      color: Theme.of(context).colorScheme.primary,
      textColor: Theme.of(context).colorScheme.onPrimary,
      Child: const text ('pop up dialog '),
    ),
  ),
)

Flyter 1.17 pre built animation for the new material motion specification

Applicable scenarios:

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

communication

Laomeng fluent blog address (330 controls usage):http://laomengit.com

Welcome to Flutter exchange group (WeChat: laomengit) and official account [Lao Meng Flutter]:

Flyter 1.17 pre built animation for the new material motion specification Flyter 1.17 pre built animation for the new material motion specification