Open7

flutterメモ

TikTakSickTikTakSick

新規プロジェクト作成

$ flutter create <project name>

アプリ起動

$ cd <project name>
$ flutter run 
TikTakSickTikTakSick

アプリ名変更

iOS

ios/Runner/Info.plistCFBundleDisplayName 部分を編集

<key>CFBundleDisplayName</key>
<string>EXAMPLE APP</string>  <!-- ←ここを編集  -->

Android

android/app/src/main/AndroidManifest.xmlandroid:labelを編集

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="EXAMPLE APP" <!-- ←ここを編集 --->
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

参考

https://zenn.dev/tatukane/articles/cebabb5e0fd932

アプリアイコン設定

  • flutter_launcher_iconsのインストール
$ flutter pub add flutter_launcher_icons
  • assets/iconディレクトリの作成(あくまで一例)

  • pubspec.yamlに以下を加える.

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/example.png"
  • 設定が終わったら,以下コマンドを行う.
$ flutter pub get
$ flutter pub run flutter_launcher_icons

参考

インストール手順(公式)

https://pub.dev/packages/flutter_launcher_icons/install

アイコン設定(公式)

https://pub.dev/packages/flutter_launcher_icons

TikTakSickTikTakSick

primary swatchの色変更

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: MaterialColor(0xFFC9A99A),  // これだとエラーが出る.
      ),
      home: new LoginPage(),
    );
  }
}

↓変更

class MyApp extends StatelessWidget {
  final MaterialColor primaryColor =
      const MaterialColor(0xFFC9A99A, <int, Color>{
    50: Color(0xFFF9F5F3),
    100: Color(0xFFEFE5E1),
    200: Color(0xFFE4D4CD),
    300: Color(0xFFD9C3B8),
    400: Color(0xFFD1B6A9),
    500: Color(0xFFC9A99A), // use this color as primary color of widgets
    600: Color(0xFFC3A292),
    700: Color(0xFFBC9888),
    800: Color(0xFFB58F7E),
    900: Color(0xFFA97E6C),
  });

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cook Helper',
      theme: ThemeData(
        primarySwatch: primaryColor,
      ),
      home: new LoginPage(),
    );
  }
}

カラーパレット

http://mcg.mbitson.com/#!?mcgpalette0=%23ffdaec

参考

https://qiita.com/kaitoland/items/421c661f89886d7ab7f0

TikTakSickTikTakSick

iosSimulatorでアプリを起動した際,画面が白いままの時の対処法

  • エラー文
[ERROR:flutter/shell/platform/darwin/graphics/FlutterDarwinContextMetalImpeller.mm(42)] Using the Impeller rendering backend.
[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Binding has not yet been initialized.
The "instance" getter on the ServicesBinding binding mixin is only available once that binding has been initialized.
Typically, this is done by calling "WidgetsFlutterBinding.ensureInitialized()" or "runApp()" (the latter calls the former). Typically this call is done in the "void main()" method. The "ensureInitialized" method is idempotent; calling it multiple times is not harmful. After calling that method, the "instance" getter will return the binding.
In a test, one can call "TestWidgetsFlutterBinding.ensureInitialized()" as the first line in the test's "main()" method to initialize the binding.
If ServicesBinding is a custom binding mixin, there must also be a custom binding class, like WidgetsFlutterBinding, but that mixes in the selected binding, and that is the class that must be constructed before using the "instance" getter.
  • 対処法.
WidgetsFlutterBinding.ensureInitialized();

を加える.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

TikTakSickTikTakSick

ElevatedButtonの色設定

  • styleに下記のような設定をする.
ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.red, // background
    foregroundColor: Colors.white, // foreground
  ),
  onPressed: () { },
  child: Text('ElevatedButton with custom foreground/background'),
)

ElevatedButtonのstyle変数を定義

class AuthButton {
  static ButtonStyle style = ElevatedButton.styleFrom(
      backgroundColor: CommonColors.primaryColor,
      foregroundColor: Colors.black);
}

参考

https://api.flutter.dev/flutter/material/ElevatedButton-class.html

TikTakSickTikTakSick

widget間に空白を作りたい時:Gapを使う

  • インストール
$ flutter pub add gap
  • 使い方
TextFormField(
・・・
),
const Gap(50),
// 3行目 ユーザ登録ボタン
ElevatedButton(
・・・
)

参考

https://pub.dev/packages/gap