広告

Flutterラボの

プレミアム会員になる

【Flutter】#3アプリ開発ドキュメンタリー

2021.10.28

10/10からYouTubeライブ新企画『アプリ開発ドキュメンタリー』を開始しました。
毎週日曜日にライブ配信内で、新規プロジェクト作成からリリースまですべてライブで公開します。
ただ開発をするのではなく、コードの解説を交えながら進めていきますので是非ご覧いただければと思います!

前回(#2)の内容。

↓アーカイブ映像はこちら


#3で開発した内容

今回はshared_preferencesを用いて、色の情報を端末保存できるように実装しました。

shared_preferences | Flutter Package Flutter plugin for reading and writing simple key-value pairs pub.dev

shared_preferencesで端末保存できる型にColor型は含まれていませんので、Color型をString型に変換して保存する必要がありました。

shared_prefs.dart

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

class SharedPrefs {
 static SharedPreferences? _sharedPreferences;

 static final String _color = 'color';

 static Future<void> setInstance() async {
   if (_sharedPreferences == null) {
     _sharedPreferences = await SharedPreferences.getInstance();
   }
 }

 static Map<ColorType, Color> _colorMap = {
   ColorType.black: Colors.black,
   ColorType.red: Colors.red,
   ColorType.blue: Colors.blue
 };

 static Color convertColorTypeToColor(ColorType colorType) {
   return _colorMap[colorType] ?? Colors.black;
 }

 static Color getColor() {
   return _colorMap[ColorType.values.firstWhere(
           (element) =>
               element.toString() == _sharedPreferences!.getString(_color),
           orElse: () => ColorType.black)] ??
       Colors.black;
 }

 static Future<bool> setColor(ColorType value) {
   return _sharedPreferences!.setString(_color, value.toString());
 }
}

//
enum ColorType { black, red, blue }

top_page.dart

Container(
 //端末に保存している色の情報を取得
 color: SharedPrefs.convertColorTypeToColor(ColorType.red),
 ),

まとめ

String型やint型に比べ、Color型を保存するのは少し複雑でしたが、無事に実装できてよかったです。それではまた次回お会いしましょう!


Flutterラボ 現役エンジニアが教えるFlutter学習! プログラミング初心者でもiOS・Android・WEBアプリ開発を学ぶことがで www.youtube.com


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)