flutter佈局-8-animated_icons動畫圖片

示例 github:flutterlayout https://github.com/LiuC520/flutterlayoutgit

MaterialApp

連載:flutter佈局-1-column 連載:flutter佈局-2-row 連載:flutter佈局-3-center 連載:flutter佈局-4-container 連載:[flutter佈局-5-Matrix4矩陣變換github

對話框,一般是應用的一些信息固然咱們通常都是須要自定義的,不用flutter自帶的 bash

animated_icons.png

動畫icons

自帶的就下面14中動畫圖片,也就是從一種狀態變換成另一種狀態 好比 AnimatedIcons.close_menu,這個表示從close(X)的樣式變成menu(三)的樣式佈局

var icons = [
      AnimatedIcons.add_event,
      AnimatedIcons.arrow_menu,
      AnimatedIcons.close_menu,
      AnimatedIcons.ellipsis_search,
      AnimatedIcons.event_add,
      AnimatedIcons.home_menu,
      AnimatedIcons.list_view,
      AnimatedIcons.menu_arrow,
      AnimatedIcons.menu_close,
      AnimatedIcons.menu_home,
      AnimatedIcons.pause_play,
      AnimatedIcons.play_pause,
      AnimatedIcons.search_ellipsis,
      AnimatedIcons.view_list
    ];

複製代碼

具體使用方法

animationController = AnimationController(
      vsync: this,
      duration: Duration(microseconds: 2000),
    );

    animationController.forward(); //加上這個,動畫才能執行,能夠放到按鈕的點擊事件裏面去,
...
 AnimatedIcon(
                      size: 30,
                      icon: icons[i],
                      progress: animationController,
                      semanticLabel: 'Show menu',
                    ),
複製代碼

示例所在的位置:github.com/LiuC520/flu…動畫

相關文章
相關標籤/搜索