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, ),
こんな感じになりました。
スタートボタンを付ける
タイトルの少し下に、スタートボタンをつけます。 ボタンのオブジェクトではなく、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, ) ],
ボタンが表示されました。
ボタンのサイズを調整します。 上記の、RoundedButtonを、SizedBoxで囲みます。
既存のWidgetを、新しいWidgetで囲みたくなった場合、該当行の電球をクリックし
「Wrap with widget...」を選択すると、簡単に新しいWidgetで囲むことが出来ます。
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 というファイルを作成し、ソースコードを移動しましょう。
続きます。