Flutter動画やってみよ(Foodアプリ)1/5
Youtubeで見つけた、Flutter UIを作る動画を見ながら なぞっていきます!
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 と入力します。
↓ 以下のコードが、自動的に作成されます。
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
void main() => runApp( MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(), home: StarterPage(), ) );
スタートページを再読み込みして、初期画像が表示されることを確認します。
単純なリロードで読まれないので注意。
(カミナリマークを押してリロード)
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), ] ) ) ) ), ); } }
次に、タイトルを入れます。
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),), ) ) ], ) ) ), ), ); } }
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, ), ], ) ) ), ), ); } }
今日は、ここまで。