Flutter インストールからメニュー表示まで

久しぶりにモバイルアプリを作ってみたくなったのでflutter始めました

iOS・Androidを同じコードで開発できるので効率的です

Flutterインストール

まずはhomebrewでFlutterをインストールしてdoctorコマンドでFlutterの利用開始チェックをする

（XcodeとAndroidStudioが入っていればチェックOKなはず）

brew install flutter
flutter doctor

Flutterプロジェクト作成

インストール完了したらFlutterプロジェクトを作成します

--org オプションでパッケージ名を指定できます（指定なしだと com.example となる）

flutter create --org package project_name

プロジェクトが作成できたら標準出力に従ってアプリを起動！

cd project_name
flutter run

プロジェクト作成直後の画面　カウントアップボタンのみがあるシンプルアプリ

画面をカスタマイズ

↑画面コードは project_name/lib/main.dart に書かれているのでこちらを修正していく

まずはこんな感じで画面を修正しました

• アプリタイトルを変更
• AppBarの表示文字・カラーを変更
• サイドメニュー（Drawer）を追加

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'framboise nail', // ブラウザタブ表示名
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'my page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.pinkAccent.shade700,
      ),
      drawer: Drawer( // サイドメニュー
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: const Text(
                'risa',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white
                ),
              ),
              decoration: BoxDecoration(color: Colors.pinkAccent.shade700),
            ),
            const ListTile(
              title: Text('カタチから探す'),
            ),
            const ListTile(
              title: Text('スクエア'),
              trailing: Icon(Icons.square),
            ),
            const ListTile(
              title: Text('ラウンド'),
              trailing: Icon(Icons.circle),
            ),
            const ListTile(
              title: Text('オーバル'),
              trailing: Icon(Icons.egg),
            ),
            const ListTile(
              title: Text('ポイント'),
              trailing: Icon(Icons.water_drop),
            )
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
          ],
        ),
      ),
    );
  }
}

このようにプロジェクト作成直後から画面をカスタマイズできました！

サイドメニューは利用頻度が高そうなのでサラッとコード書けるようにしておきたい

ちょっとしたカスタマイズですが、何時間も掛かってしまいました…