iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
2
Mobile Development

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

【Flutter基礎概念與實作】 Day9–建立專案與App開頭動畫

今天開始專案的實作,我把App的取名為「FlutTube」其實就是Flutter和Youtube的合體,在這次的專案中會實作到以下幾個功能:

  1. Splash Screen Animation:
    使用2dimension來做簡單的開場動畫
  2. Firebase Authentication:
    使用Firebase auth來幫我們管理使用者帳號密碼,就不用分心在設計管理資料庫的部分。
  3. Google Login:
    也是Firebase提供的功能,能讓使用者使用Google帳號進行登入
  4. 串接YouTube api:
    目前在Dart Pub上有找到別人寫的Youtube api的Package可以使用,若有問題我們再自己來串接。
  5. 串接Movie api:
    串接TMDb API,並且來做一個美觀的熱門電影清單

實作過程會提到BLoC Design Pattern和Testing的概念,若時間充足視情況將App上架到Play Store上。
如果對以上的功能有興趣,那就一起完成FlutTube這個專案吧!
(有任何建議也歡迎留言,可以增加實作的功能)

建立專案

從Android Studio或cmd建立新的Flutter專案(Day6有詳細教學),如果你最後有想要把App發佈出去,記得取一個獨一無二的Package name。


新增assets資料夾

新增assets資料夾用來放待會的動畫以及其他圖檔
新增後的檔案架構:

fluttube
└───android
└───assets  
└───ios 
│
└───lib
│   └───main.dart

└───test    
└───pubspec.yaml         
│    .   
│    .
│    .

下載flare_splash_screen Package

在pubspec.yaml dependencies添加

dependencies:
    flare_splash_screen: ^2.1.3

並在下方flutter處添加

flutter:
    assets:
        - asstes/

最後點選上方「Packages get」下載Package。

完整pubspec.yaml程式碼:

name: fluttube
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flare_splash_screen: ^2.1.3

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - assets/

修改main.dart

開啟main.dart修改成以下程式碼

import 'package:flutter/material.dart';
import 'splash_page.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutTube',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false, // 去除右上方Debug標誌
      home: SplashPage(),
    );
  }
}

系統會說找不到splash_page.dart檔案,所以現在來建立新增splash_page.dart和login_page.dart

fluttube
└───android
└───assets  
└───ios 
│
└───lib
│   └───login
│   │   └───login_page.dart
│   └───main.dart
│   └───splash_page.dart      
│
└───test    
└───pubspec.yaml         
│    .   
│    .
│    .

建立Splash Screen

開啟ui/splash_page.dart,貼上以下程式碼

import 'package:flutter/material.dart';
import 'package:flare_splash_screen/flare_splash_screen.dart';
import 'login/login_page.dart';

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  
  @override
  Widget build(BuildContext context) {
    return SplashScreen.navigate(
      name: 'assets/splash.flr', // flr動畫檔路徑
      next: LoginPage(), // 動畫結束後轉換頁面
      until: () => Future.delayed(Duration(seconds: 3)), //等待3秒
      startAnimation: 'rotate_scale_color', // 動畫名稱
    ); 
  }
}

在這裡我們使用「flare_splash_screen」這個Package提供的widget來呈現動畫。
widget需要的參數有flr檔案路徑、指定下一個頁面、要播放的動畫名稱等等,參數細節可以到他的Github上看。
待會再來處理flr動畫的部分,先簡單建立一個LoginPage

建立 Login Page

開啟login/login_page.dart,貼上以下程式碼

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: Text('Login Form', style: TextStyle(fontSize: 40),),
      )
    );
  }
}

這裡就簡單寫一個空白頁面用來跳轉,之後再完成Login介面。

flare動畫

Flare是一个強大的設計和動畫製作工具,輸出的副檔名就是flr,Flutter中有許多Widget可以支援撥放flr動畫。
先用我的拙劣作品展示一下效果,開啟App會先播放開場動畫,設定的時間到後就跳轉到下一個頁面(Login Page)。


使用的平台為2dimension

  1. 首先先註冊帳號

  2. 註冊好後到右上角的「Your file」處新增「New flare」

  3. 會看見以下畫面,可以直接案SAVE

  4. 就可以開始拖拉元件

  5. 設計動畫
    右上方轉換成「ANIMATE」,接著就設計元件要如何變化。例如GIF中我就是設定0秒時星星是紅色,2秒時星星要轉360度並且變成藍色,他就會把星星的轉換變為動畫。

  6. 輸出flr檔
    輸出前先更改左下角的動畫名稱,由於一個專案中可以有多個動畫,所以在程式中也會需要指定要播放的動畫名稱。

    確認好就點選右上角的Export就可以下載flr檔囉。

由於我沒有美術及設計的背景,所以只簡單介紹製作步驟,設計的細節就留給你去嘗試囉,另外網路上有許多詳細的教學可以參考


平台上也有很多神人分享的作品可以參考,不過要注意每個作品的license都不同,不要觸犯到智慧財產權了。
例如JuanCarlos作品,Flutter Team成員 Filip Hracek的動畫人物(偷偷推廣他主持的Flutter Boring Show),你可以fork他的專案然後玩玩看,右邊是我修改了髮色、嘴角和手的動作後的效果。

完成Splash Screen

現在你有了自己的開頭動畫,只要把它放進assets資料夾內就可以了。

fluttube
└───android
└───assets  
│   └───splash.flr
└───ios 
│
└───lib
│   └───login
│   │   └───login_page.dart
│   └───main.dart
│   └───splash_page.dart  
│
└───test    
└───pubspec.yaml         
│    .   
│    .
│    .

並且把splash_page.dart程式碼內的name以及startAnimation改成你的檔案和動畫名稱就好了。

SplashScreen.navigate(
      name: 'assets/splash.flr', // flr動畫檔路徑
      next: LoginPage(),
      until: () => Future.delayed(Duration(seconds: 3)),
      startAnimation: 'rotate_scale_color',
    );

最後就執行看看你的成品吧!

今日總結

經過前幾天的Flutter基礎介紹,終於到了專案實作環節,對於這次的實作有任何建議都歡迎留言。
今天我們使用2dimension簡單製作了App的開場動畫,明天來介紹和實作Firebase auth。

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


上一篇
【Flutter基礎概念與實作】 Day8–Package引用與管理
下一篇
【Flutter基礎概念與實作】 Day10–Firebase與Bloc Design Pattern
系列文
Flutter---Google推出的跨平台框架,Android、iOS一起搞定30

1 則留言

0
layer86109
iT邦新手 5 級 ‧ 2020-11-26 15:00:06

現在輸出的副檔名不叫flr了,請問還可以用嗎?

我要留言

立即登入留言