Flutter基本メモ

pubspec.yamlとは

アプリケーションのバージョン管理、依存パッケージの管理などアプリケーションに関する設定を記述するファイル
pubspec.yamlにパッケージ名:バージョンを追記し「Pub get」コマンドを実行することでパッケージをプロジェクトに取り込める。

dependencies

アプリケーションを使用する際に必要となるパッケージを記述する。

dev_dependencies

アプリケーションを開発する際に必要となるパッケージを記述する。テスト、静的解析ツールなど

build.gradleとは

StatelessWidget

状態を持たないウィジェットのこと定義した変数は親から渡された場合のみ、更新される。

class SampleStatelessClass extends StatelessWidget {
  final String text;

  SampleStatelessClass({@required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(text),
      ),
    );
  }
}

もし子WidgetであるStatelessWidgetで使用した変数を親Widgetにて変更した場合、子であるStatelessWidgetは全て再描画（build）されます。

StatefullWidget

状態を持つウィジェットのこと状態を持つため、自分の変数を更新することで自分自身を再ビルドすることができます。

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
　　// setStateで変数を上書きし、再ビルドする
    setState(() => _counter++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
　　　　// 親Widgetから渡された変数にアクセスする
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SampleStatelessClass(
              text: 'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

２つのクラスを作成する必要がある

StatefulWidgetをextendsしたクラス
Stateをextendsしたクラス

Riverpod サンプル

ダークモード対応

MyTheme.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

ThemeData lightTheme = ThemeData(
  textTheme: TextTheme(
      headline6: TextStyle(fontSize: 25.sp, color: Colors.black),
      bodyText1: TextStyle(fontSize: 20.sp, color: Colors.white),
      bodyText2: TextStyle(fontSize: 19.sp, color: Colors.black)),
  backgroundColor: Color(0xfefffcf8),
  brightness: Brightness.light,
  primaryColor: Colors.white,
  primaryColorLight: Color(0xaaaaaaaa),
  primaryColorDark: Colors.amber,
  secondaryHeaderColor: Colors.white70,
  appBarTheme: AppBarTheme(
    backgroundColor: Colors.amberAccent, // AppBarの背景色
    elevation: 4, // 影の高さ
    titleTextStyle: TextStyle(fontSize: 22.sp, color: Colors.brown),
    iconTheme: IconThemeData(
      color: Colors.white, // アイコンの色
      size: 25.sp,
    ),
  ),
  dialogTheme: DialogTheme(backgroundColor: Colors.white),
);

ThemeData darkTheme = ThemeData(
  textTheme: TextTheme(
      headline6: TextStyle(fontSize: 25.sp, color: Color(0xeeeeeeee)),
      bodyText1: TextStyle(fontSize: 20.sp, color: Colors.black),
      bodyText2: TextStyle(fontSize: 19.sp, color: Color(0xeeeeeeee))),
  backgroundColor: Colors.black,
  // ライトモードのカラーパレット
  brightness: Brightness.light,
  primaryColor: Color(0x33333333),
  primaryColorLight: Color(0xdddddddd),
  primaryColorDark: Colors.amber,
    secondaryHeaderColor: Colors.black87,
  appBarTheme: AppBarTheme(
    backgroundColor: Colors.amberAccent, // AppBarの背景色
    elevation: 4, // 影の高さ
    titleTextStyle: TextStyle(fontSize: 22.sp, color: Colors.brown),
    iconTheme: IconThemeData(
      color: Colors.white, // アイコンの色
      size: 25.sp,
    ),
  ),
  dialogTheme: DialogTheme(
    backgroundColor: Colors.black,
  ),
);

ミニデータ保存

MySharedPreference.dart

import 'package:shared_preferences/shared_preferences.dart';

class MySharedPreference {

  static Future<int> getPrefsLimit() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getInt("limit") ?? 10;
  }

  static void setPrefsLimit(int limit) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setInt("limit", limit);
  }

  static Future<bool> getPrefsSound() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getBool("sound") ?? true;
  }

  static void setPrefsSound(bool sound) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setBool("sound", sound);
  }

  static Future<int> getPrefsTestLimit() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getInt("test_limit") ?? 100;
  }

  static void setPrefsTestLimit(int limit) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setInt("test_limit", limit);
  }
}

効果音

SoundManager.dart

import 'MySharedPreference.dart';
import 'package:audioplayers/audioplayers.dart';

class SoundManager{
  static void playCorrect() async {
    bool soundable = await MySharedPreference.getPrefsSound();

    if(soundable){
      AudioCache audioCache = AudioCache();
      audioCache.play('sounds/correct.mp3');
    }
  }

  static void playSelect() async {
    bool soundable = await MySharedPreference.getPrefsSound();

    if(soundable){
      AudioCache audioCache = AudioCache();
      audioCache.play('sounds/select.wav');
    }
  }

  static void playWrong() async {
    bool soundable = await MySharedPreference.getPrefsSound();

    if(soundable){
      AudioCache audioCache = AudioCache();
      audioCache.play('sounds/wrong.mp3');
    }
  }

  static void playArchive() async {
    bool soundable = await MySharedPreference.getPrefsSound();

    if(soundable){
      AudioCache audioCache = AudioCache();
      audioCache.play('sounds/archive.mp3');
    }
  }
}

Flutter基本メモ_