Open7
flutterメモ
新規プロジェクト作成
$ flutter create <project name>
アプリ起動
$ cd <project name>
$ flutter run
アプリ名変更
iOS
ios/Runner/Info.plist
のCFBundleDisplayName
部分を編集
<key>CFBundleDisplayName</key>
<string>EXAMPLE APP</string> <!-- ←ここを編集 -->
Android
android/app/src/main/AndroidManifest.xml
のandroid:label
を編集
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:label="EXAMPLE APP" <!-- ←ここを編集 --->
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
参考
アプリアイコン設定
-
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
参考
インストール手順(公式)
アイコン設定(公式)
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(),
);
}
}
カラーパレット
参考
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());
}
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);
}
参考
widget間に空白を作りたい時:Gapを使う
- インストール
$ flutter pub add gap
- 使い方
TextFormField(
・・・
),
const Gap(50),
// 3行目 ユーザ登録ボタン
ElevatedButton(
・・・
)
参考
bottomNavigationBarの設定
背景色の設定
-
backgroundColor
を加える.
bottomNavigationBar: BottomNavigationBar(
backgroundColor: ・・・ // ←ここのこと
・・・・
・・・・
参考