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

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

Flutter動画やってみよ(Foodアプリ)1/5

Youtubeで見つけた、Flutter UIを作る動画を見ながら なぞっていきます!

www.youtube.com

26分の動画ですが、今回は6分までのコードです。
(書ききれなかったので、続きます)

アプリ書き始め

Visual Studio Code を起動して、Flutterの新規プロジェクトを作成します。
作成できたら、main.dart を以下の内容にする。

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: 
  )
);

lib フォルダの下に pages フォルダを作成し、StartPage.dart ファイルを追加します。
StatefulWidget のテンプレートコードを記述します。

st 通すと、ショートカットで作れます。
そのまま、クラス名を入力すると必要箇所全てを同時編集出来ます。
ここでは、StarterPage と入力します。

f:id:momoizo:20200513024510p:plain
st ショートカット

↓ 以下のコードが、自動的に作成されます。

f:id:momoizo:20200513024804p:plain
自動的に作成されたテンプレートコード

import 文を追加して、コンパイルエラーを消します。

import 'package:flutter/material.dart';

class StarterPage extends StatefulWidget {
  @override
  _StarterPageState createState() => _StarterPageState();
}

class _StarterPageState extends State<StarterPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

main.dart に戻って、StarterPageを呼び出すように変更します。

void main() => runApp(
  MaterialApp(
    theme: ThemeData(),
    home: StarterPage(),
  )
);

StartPage の編集(背景画像)

StarterPageを編集していきます。
背景画像を設定します。 アセットの登録をしていきます。

class _StarterPageState extends State<StarterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/starter-image.jpg')
          )
        )
      ),
    );
  }
}

pubspec.yaml ファイルを編集し、アセットファイルを登録します。

flutter:
  assets:
     - assets/images/starter-image.jpg
     - assets/images/one.jpg
     - assets/images/two.jpg
     - assets/images/three.jpg

GitHubから、該当ファイルをダウンロードします。

https://github.com/afgprogrammer/Flutter-food-delivery-app-ui/tree/master/assets/images

main.dart に、デバッグ設定を追加します。 (?)

void main() => runApp(
  MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(),
    home: StarterPage(),
  )
);

スタートページを再読み込みして、初期画像が表示されることを確認します。
単純なリロードで読まれないので注意。
(カミナリマークを押してリロード)

f:id:momoizo:20200513025021p:plain
背景画像設定

StartPage の編集(タイトルとボタンの追加)

タイトルを付けて行きます。
写真にグラデーションをかけます。

class _StarterPageState extends State<StarterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        …
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.bottomCenter,
              colors: [
                Colors.black.withOpacity(.9),
                Colors.black.withOpacity(.8),
                Colors.black.withOpacity(.2),
              ]
            )
          )
        )
      ),
    );
  }
}

f:id:momoizo:20200513025201p:plain
グラデーション適用後

次に、タイトルを入れます。

    return Scaffold(
      body: Container(
        …
        child: Container(
          …
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, )),
                SizedBox(height: 20, ),
                Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18)),
              ],
            )
          )
        ),
      ),
    );
  }
}

ボタンを追加します。

    return Scaffold(
      body: Container(
        …
        child: Container(
          …
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, )),
                SizedBox(height: 20, ),
                Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18)),
                SizedBox(height: 20, ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    gradient: LinearGradient(
                      colors: [
                        Colors.yellow,
                        Colors.orange,
                      ]
                    )
                  ),
                  child: MaterialButton(
                    minWidth: double.infinity,
                    child: Text("Start", style: TextStyle(color: Colors.white),),
                  )
                )
              ],
            )
          )
        ),
      ),
    );
  }
}

f:id:momoizo:20200513025257p:plain
タイトルとボタン追加

StartPage の編集(表示位置の調整)

各表示の位置関係を調整します。

class _StarterPageState extends State<StarterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/starter-image.jpg'),
            fit: BoxFit.cover
          )
        ),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.bottomCenter,
              colors: [
                Colors.black.withOpacity(.9),
                Colors.black.withOpacity(.8),
                Colors.black.withOpacity(.2),
              ],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, )),
                SizedBox(height: 20, ),
                Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18)),
                SizedBox(height: 100, ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    gradient: LinearGradient(
                      colors: [
                        Colors.yellow,
                        Colors.orange,
                      ]
                    )
                  ),
                  child: MaterialButton(
                    minWidth: double.infinity,
                    child: Text("Start", style: TextStyle(color: Colors.white),),
                  )
                ),
                SizedBox(height: 30, ),
                Align(
                  child: Text("Now Deliver To Your Door 24/7", style: TextStyle(color: Colors.white70, fontSize: 15, ),)
                ),
                SizedBox(height: 30, ),
              ],
            )
          )
        ),
      ),
    );
  }
}

f:id:momoizo:20200513025414p:plain
表示位置の調整後

今日は、ここまで。

Flutter モバイルアプリ開発バイブル

Flutter モバイルアプリ開発バイブル