iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
Mobile Development

Flutter---Google推出的跨平台框架,Android、iOS一起搞定系列 第 22

【Flutter基礎概念與實作】 Day22–美化首頁(2) 增加Drawer和標題文字動畫

今天繼續來幫首頁增加一些小功能,不會像昨天程式碼那麼多了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


上一篇
【Flutter基礎概念與實作】 Day21–美化首頁(1) 滑動吧!電影卡片
下一篇
【Flutter基礎概念與實作】 Day23–實作Youtube Bloc、Youtube API
系列文
Flutter---Google推出的跨平台框架,Android、iOS一起搞定30

尚未有邦友留言

立即登入留言