今天繼續來幫首頁增加一些小功能，不會像昨天程式碼那麼多了XD。

Drawer

Drawer widget在Day7有介紹到如何使用，今天就來幫HomePage加上Drawer吧。

在開始前由於我想在Drawer中顯示使用者登入的信箱，所以要先從Authentication State中取得使用者登入帳號。

// 修改main.dart BlocBuilder部分程式碼
if (state is Authenticated) {
                return HomePage(email: state.userName,);

// 修改HomePage的建構子，傳入使用者信箱
class HomePage extends StatefulWidget {
  final String email;
  HomePage({Key key, this.email}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

ok，接下來可以設計drawer要顯示些什麼內容了。

你可以選擇把程式碼加在home_page.dart裡面，或是另外開新檔案兩種方式都可以，我比較偷懶就直接加在原本的檔案中。

class SideDrawer extends StatelessWidget {
  final String email;

  SideDrawer({Key key, this.email}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width * 0.55,
      child: Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: Image.asset('assets/no.jpg'),
              accountEmail: Text(email),
              decoration: BoxDecoration(color: Colors.brown),
            ),
            ListTile(
              leading: Icon(Icons.sentiment_satisfied),
              title: Text('Rate Our App'),
              onTap: () {
                Navigator.of(context).pop();
                _asyncScoreDialog(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.exit_to_app),
              title: Text("Log out"),
              onTap: () {
                BlocProvider.of<AuthenticationBloc>(context)
                    .dispatch(LoggedOut());
              },
            ),
            ListTile(
              leading: Icon(Icons.info),
              title: Text("About"),
              onTap: () {
                SnackBar snackbar = SnackBar(
                  content: Text('FlutTube是第十一屆iT邦幫忙鐵人賽的實作專案\n其中使用的電影資料由TMDb所提供'),
                  duration: Duration(seconds: 5),
                );
                Scaffold.of(context).showSnackBar(snackbar);
                Navigator.of(context).pop();
              },
            )
          ],
        ),
      ),
    );
  }
}

為了調整Drawer彈出時的寬度，所以用SizeBox包覆住Drawer Widget。
這邊用三個listTile展示效果：

1. 「Rate Our App」請使用者幫App在商店中評分
2. 「Log Out」讓使用者可以登出
3. 「About」顯示App的資訊

接下來補上缺少的_asyncScoreDialog，用來彈出是否幫忙評分的對話框。

Dialog

同樣可以選擇開新檔案或是直接把程式碼放在home_page.dart。

Future<void> _asyncScoreDialog(BuildContext context) async {
  return showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('喜歡FlutTube嗎?'),
        content: const Text('如果你喜歡FlutTube的服務，那就幫我們填寫評論吧!'),
        actions: <Widget>[
          FlatButton(
            child: const Text('待會'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          FlatButton(
            child: const Text('好!'),
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      );
    },
  );
}

Drawer的部分非常簡單的完成了，接下來只要帶入到Scaffold的drawer屬性就可以囉。

Scaffold(
        drawer: SideDrawer(
          email: widget.email,
        ),....
)

今天另一個小功能就是使用「animated_text_kit」套件用動畫的方式顯示目前的電影清單類型。

Animated_Text_Kit

Dart Pub網址，裡面有其他動畫範例可以參考。

在pubspec.yaml添加package引用：

開啟show_movie_widget.dart增加引用
import 'package:animated_text_kit/animated_text_kit.dart';
把原本顯示清單類型的標題取代掉(原本的51行附近)，更改為：

 SizedBox(
        child: TypewriterAnimatedTextKit(
        text: [category,],
        isRepeatingAnimation: false,
        textStyle: TextStyle(
            fontSize: 34.0,
            fontFamily: "Calibre-Semibold",
            color: Colors.white),
            textAlign: TextAlign.start,
            alignment: AlignmentDirectional.topStart 
        ),
),

增加跳轉頁面按鈕

原先是打算在電影標題下方用跑馬燈的方式顯示電影的一些資訊，但發現會嚴重影響到介面的流暢度，所以就作罷了。

改用簡單的方式跳轉頁面吧。
在show_movie_widget.dart，把原本用來顯示電影上映日期的Text()取代成：

GestureDetector(
        onTap: () {},
        child: Padding(padding: EdgeInsets.only(top: 10.0), 
		child: Text(
                '點擊看更多細節與預告片',
                style: TextStyle(
                    color: Colors.amberAccent,
                    fontSize: 14.0,
                    fontWeight: FontWeight.bold),
        ),)
),

過幾天可以用來跳轉頁面到電影細節頁面。

今日總結

今天加上了drawer和文字動畫，讓首頁看起來更加豐富。
首頁的美化工作就到此告一個段落，其實還可以加上搜尋之類的功能，如果最後還有時間就再回頭加上吧。

明天來完成此專案最後一個Bloc——YoutubeBloc，利用Youtube Api搜尋電影標題取得影片資訊最後播放電影預告。

完整程式碼在這裡-> FlutTube Github