もっぺんプログラミング(´・ω・`)

もっぺん頑張って副業プログラマを目指してます。

Flutter動画やってみよ(eBook)1

以下のYoutubeの動画を、実際になぞっていきます。

画面遷移とアニメーションが魅力的なアプリです。
こんなアプリをサクサク作れるようになりたい!

今回もVisual Studio Codeで新規プロジェクトを作成して初めて行きます。

では、行きましょう。

アセットの設定をする

画像を扱うために定番操作です。

assets/images ディレクトリを作ります。

次に、pubspec.yaml に、assets のディレクトリとして登録します。

flutter:
  assets:
    - assets/images/

画像ファイルは、GitHubから取得しておきます。

eBook_app_Flutter/assets/images at master · abuanwar072/eBook_app_Flutter · GitHub

定数用ファイル作成

lib/constants.dart を作成します。

import 'package:flutter/material.dart';

const kBlackColor = Color(0xFF393939);
const kLightBlackColor = Color(0xFF8F8F8F);
const kIconColor = Color(0xFFF48A37);
const kProgressIndicator = Color(0xFFBE7066);

final kShadowColor = Color(0xFFD3D3D3).withOpacity(.84);

main.dart を編集していく

初期の main.dart の内容を削除して、以下からスタートします。
※ MyHomePage を削除後、MyApp を少し編集で大丈夫です。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: true, // ← 追加
      title: 'eBook App',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white, // ← 追加
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

main.dart に、WelcomeScreen のコードを追記していきます。
Visual Studio Codeなら、 st 入力すると、ショートカットで Flutter Stateless Widgetを入力出来ます。

ここに、assets に追加した背景画像を表示させます。

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/Bitmap.png"),
            fit: BoxFit.fill,
          ),
        ),
      ),
    );
  }
}

背景画像が表示されたら、アプリタイトルを追加します。 先程の、Container の child に以下を追加します。

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    RichText(
      text: TextSpan(
        style: Theme.of(context).textTheme.display3,
        children: [
          TextSpan(
            text: "flamin",
          ),
          TextSpan(
              text: ".go",
              style: TextStyle(fontWeight: FontWeight.bold))
        ],
      ),
    ),
  ],
),

フォントカラーを、MyAppのテーマに追記します。

    return MaterialApp(
      debugShowCheckedModeBanner: true,
      title: 'eBook App',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        textTheme: Theme.of(context).textTheme.apply( //← この部分を追記
              displayColor: kBlackColor,
            ),

こんな感じになりました。

f:id:momoizo:20200523013843p:plain:h300

スタートボタンを付ける

タイトルの少し下に、スタートボタンをつけます。 ボタンのオブジェクトではなく、Containerを装飾してボタンの見た目にしています。

Container(
  margin: EdgeInsets.symmetric(vertical: 16),
  padding: EdgeInsets.symmetric(vertical: 16, horizontal: 30),
  decoration: BoxDecoration(  // ← 箱型に
    color: Colors.white,
    borderRadius: BorderRadius.circular(30),     // ← でも角丸に
    boxShadow: [ // ← 影をつける
      BoxShadow(
        offset: Offset(0, 15),
        blurRadius: 30,
        color: Color(0xFF666666).withOpacity(.11),
      ),
    ],
  ),
  child: Text(
    "start reading",
    style: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
  ),
),

次にボタンのアクションを付けていきます。 先程のContainerを、切り出してRoundedButton クラスを作成します。

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final double verticalPadding;
  final double fontSize;

  const RoundedButton({
    Key key,
    this.text,
    this.press,
    this.verticalPadding = 16,
    this.fontSize = 16,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: press,
      child: Container( // ← 上記で追加したContainer
        … 
      ),
    );
  }
}

先程、Containerを書いていた箇所を、RoundButtonに置き換えます。

children: <Widget>[
  RichText(
    text: TextSpan(
      style: Theme.of(context).textTheme.display3,
      children: [
        TextSpan(
          text: "flamin",
        ),
        TextSpan(
            text: ".go",
            style: TextStyle(fontWeight: FontWeight.bold))
      ],
    ),
  ),
  RoundedButton(   // ← ここを置き換え
    text: "start reading.",
    fontSize: 20,
  )
],

ボタンが表示されました。

f:id:momoizo:20200523030818p:plain:h300

ボタンのサイズを調整します。 上記の、RoundedButtonを、SizedBoxで囲みます。

既存のWidgetを、新しいWidgetで囲みたくなった場合、該当行の電球をクリックし
「Wrap with widget...」を選択すると、簡単に新しいWidgetで囲むことが出来ます。

f:id:momoizo:20200523031406p:plain

SizedBox(
  width: MediaQuery.of(context).size.width * .6,
  child: RoundedButton(
    text: "start reading.",
    fontSize: 20,
  ),
),

テキストが左寄せになるため、Containerに alignment を設定します。

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: press,
      child: Container(
        alignment: Alignment.center,  ← alignment を追加

最後に、RoundButton クラスのソースコードを切り出します。
lib/round_button.dart というファイルを作成し、ソースコードを移動しましょう。

続きます。