BETA

Flutter で Hello World

投稿日:2020-07-22
最終更新:2020-07-22

アプリ開発に至った理由は

嫁から食費を渡され生活するお小遣い型サラリーマンは、まだまだ世の中にはたくさん生息していると思う。かくいう自分も、少ない小遣いの中からなんとか自分のへそくりを作っている昭和世代の悲しいサラリーマンだ。

しかし世の中には、そんな悲しい使用目的の資産管理アプリは存在しないだろう。
ならば自作してみるかと、割と安直な気持ちでFlutterアプリに挑戦してみることにした。

どんなアプリを作るのか

求めるアプリの簡単な設計図である。

  1. 上段は、現在の所持金を表示するエリア。入金できるボタンも併設する。
  2. 下段はお会計の一覧。
  3. 支払は支払ボタンから。
  4. オプションやメニューなどは今のところ持たせない。

長いソースは読めない

自分はポンコツすぎて長いソースが読めない。

FlutterはWidgetを階層構造に配置することで作成するらしく、そのため何も考えずにソースコードを書いていくと、インデントがすごいことになってしまう。

そこで、まずサンプルソースを細かい部品ごとに分解する作業から始めることにした。

import 'package:flutter/material.dart';  
import 'package:lunch_wallet/view/frame.dart';  

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

main.dartは本当にトップ部分だけにした。

import 'package:flutter/material.dart';  
import 'package:lunch_wallet/view/contents.dart';  

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter Demo',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
        visualDensity: VisualDensity.adaptivePlatformDensity,  
      ),  
      home: MyHomePage(),  
    );  
  }  
}  

frame.dartなんて名前にはなっているけども、結局のところthemeとhomeくらいしかない。
またサンプルではMyHomePageの引数にタイトル文字列を渡していたが、特に引数とする意味はなさそうだったので、何も渡さないようにしている。

import 'package:flutter/material.dart';  
import 'package:lunch_wallet/view/body.dart';  
import 'package:lunch_wallet/view/button.dart';  
// import 'package:lunch_wallet/view/header.dart';  

class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      // ヘッダ  
      appBar: Header(),  
      // 本体  
      body: Body(),  
      // フローティングボタン  
      // floatingActionButton: Button(),  
    );  
  }  
}  

contents.dartが管理するScaffoldには、appBar、body、floatingActionButtonの3要素が存在している。
サンプルではすべての処理がこのレイヤーに実装されているが、今後の実装で複雑化することを見越して子供たちを独立させてしまうことにした。同時にStatefulである理由がなくなったので、Statelessにしている。

フローティングボタンは今のところ使わないのでコメントにしている。

import 'package:flutter/material.dart';  

class Header extends StatelessWidget with PreferredSizeWidget{  
  @override  
  Size get preferredSize => Size.fromHeight(kToolbarHeight);  

  @override  
  Widget build(BuildContext context) {  
    return AppBar(  
      centerTitle: true,  
      title: Text('ランチウォレット'),  
    );  
  }  
}  

header.dartはAppBarを管理する。特に変更点はなく、おっさんが大好きなセンタリングにしてみた。

import 'package:flutter/material.dart';  
// import 'package:lunch_wallet/view/cashier.dart';  
import 'package:lunch_wallet/view/wallet.dart';  

class Body extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
        children: <Widget>[  
          // 上段の所持金  
          Container(  
            height: 75.0,  
            margin: EdgeInsets.only(bottom: 10, top: 10, left: 10, right: 10),  
            child: Wallet(),  
          ),  
          // 下段のお会計一覧  
          Container(  
            height: 560.0,  
            // child: Cashier(),  
          ),  
        ],  
    );  
  }  
}  

body.dart。これが本体部分になる。上段の所持金エリアと下段のお会計一覧を定義しており、それぞれさらに下位のクラスを参照している。

import 'package:flutter/material.dart';  
import 'package:lunch_wallet/view/wallet/amountText.dart';  
import 'package:lunch_wallet/view/wallet/depositButton.dart';  

class Wallet extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return ListView(  
      itemExtent: 75.0,  
      children: <Widget>[  
        Padding(  
          padding: const EdgeInsets.symmetric(vertical: 0.0),  
          child: Row(  
            crossAxisAlignment: CrossAxisAlignment.start,  
            children: <Widget>[  
              Expanded(  
                flex: 1,  
                child: Container(  
                  decoration: const BoxDecoration(color: Colors.blue),  
                ),  
              ),  
              Expanded(  
                flex: 40,  
                child: AmountText(),  
              ),  
              Expanded(  
                flex: 20,  
                child: DepositButton(),  
              ),  
            ],  
          ),  
        ),  
      ],  
    );  
  }  
}  

所持金を表示するエリアはwallet.dartとした。Rowウィジェットで横並びレイアウトしている。
1番目はただのアクセントとしているだけで意味はなく、2番目に所持金の表示欄、3番目に入金ボタンを配置する。

import 'package:flutter/material.dart';  

class AmountText extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Padding(  
      padding: const EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),  
      child: Column(  
        crossAxisAlignment: CrossAxisAlignment.start,  
        children: <Widget>[  
          Text(  
            'ウォレット残高',  
            style: const TextStyle(  
              fontWeight: FontWeight.w500,  
              fontSize: 22.0,  
            ),  
          ),  
          const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),  
          Text(  
            '000円',  
            style: const TextStyle(  
              fontSize: 20.0,  
            ),  
          ),  
        ],  
      ),  
    );  
  }  
}  

amountText.dartは所持金の表示を受け持つ。所持金は縦に2行。今は固定の表示になっているが、いずれ修正する。

import 'package:flutter/material.dart';  

class DepositButton extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return RaisedButton.icon(  
      icon: Icon(  
        Icons.add,  
        color: Colors.white,  
      ),  
      label: Text('入金'),  
      onPressed: () {  
      },  
      color: Colors.green,  
      textColor: Colors.white,  
    );  
  }  
}  

最後にdepositButton.dart。入金ボタンを押した際のロジックは後回し。

最初の一歩はこんなかんじ

サンプルソースを細分化して、いくつかのデザインを見様見真似で弄ってみた結果、わりといい感じの画面が仕上がった。まだ機能は一切実装していないのでこのデザインの通り進められるかは自信がないが、とりあえず行けるところまで行ってみようと思う。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

そろそろ業界からオプトアウトされそうな枯れ老人の足掻きブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう