Flutter나 React-Native에서 빌드를 하다가 Execution failed for task ':app:mergeDexDebug' 에러를 종종 볼 수 있다. minSdkVersion이 20 이하로 설정되어 있으면 multidex 지원 라이브러리를 사용해야 한다.

보다 자세한 것은

64K가 넘는 메서드의 앱에 관해 멀티덱스 사용 설정  |  Android 개발자  |  Android Developers

플러터로 작성한 어플리케이션을 안드로이드 디바이스에서 실행하면 위처럼 스크롤 기능이 있는 위젯에서 터치에 의해 당겨지는 느낌의 effect를 볼 수 있다.

예전부터 너무 지우고 싶었던 효과라 stackoverflow에서 찾다가 발견해서 기록해둔다.

glow effect를 제거하는 Behavior을 생성한다. (ScrollBehavior 상속)

api.flutter.dev/flutter/widgets/ScrollBehavior-class.html

class MyBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    return child;
  }
}

앱 전체에 적용할 경우 최상단 MaterialApp에 아래와 같이 적용시킨다.

MaterialApp(
  builder: (context, child) {
    return ScrollConfiguration(
      behavior: MyBehavior(),
      child: child,
    );
  },
  home: new MyHomePage(),
);

특정 ListView의 적용할 경우,

ScrollConfiguration(
  behavior: MyBehavior(),
  child: ListView(
    ...
  ),
)

https://pub.dev/packages/kakao_flutter_sdk

https://pub.dev/packages/flutter_naver_login

https://pub.dev/packages/sign_in_with_apple

어플을 개발하다보면 작은 양의 데이터를 임시적으로 기기 내부에 저장해둘 때가 있다.

내부에 저장하려는 데이터의 양이 많거나 빠른 속도를 요구할 때는 SQLite를 사용하지만

작고 간단한 String 값 몇 개 정도는 SQLite 를 사용하는 것은 무거울 수도 있다....

이럴 경우 SharedPreference라는 클래스를 사용하여 이를 처리하는 방법이 있다.

나의 경우에는 앱에서 로그인을 하면 서버로 부터 JWT(JSON Web Tokens)을 받아와

이를 저장하고, 이후 추가적인 로그인 없이도 exp 타임 안에 계속해서 로그인 상태가

유지되어야 했다.

flutter 에서도 다행히 SharedPreference를 지원하는 패키지가 있으며

이 클래스를 Flutter에서도 사용하는 방법을 기록해두려고 한다.

우선 안드로이드에서는 아래와 같이 사용한다.

1. 저장

SharedPreferences pref = getSharedPreferences(PREFERENCE, MODE_PRIVATE);

// SharedPreferences 의 데이터를 저장/편집을 위해 Editor 변수를 선언
SharedPreferences.Editor editor = pref.edit();

// key값에 value값을 저장.
// String, boolean, int, float, long 값 등 저장 가능
editor.putString(key, value);

// 메모리에 있는 데이터를 저장장치에 저장함. commit
editor.commit();

2. 불러오기

// SharedPreference 를 선언.
// 저장했을때와 같은 key로 xml에 접근.
SharedPreferences pref = getSharedPreferences(PREFERENCE, MODE_PRIVATE);

// key에 해당한 value를 불러온다.
// 두번째 매개변수는 , key에 해당하는 value값이 없을 때에는 이 값으로 대체한다.
String result = pref.getString(key, "");

한눈에 봐도 코드가 직관적이다.

SharedPreference 의 경우 Key/Value 형태로 데이터를 저장할 수 있는 데이터 구조로

내부적으로는 XML 파일로 저장이 된다.

flutter에서 이를 어떻게 사용해야 하는지 알아보자.

플러터의 경우 아래에 패키지를 통해 SharedPreference를 사용할 수 있다.

https://pub.dev/packages/shared_preferences

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shared preferences demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Shared preferences demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

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

  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

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

  @override
  void initState() {
    super.initState();
    _loadCounter();
  }

  _loadCounter() async {
    // SharedPreferences의 인스턴스를 필드에 저장
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      // SharedPreferences에 counter로 저장된 값을 읽어 필드에 저장. 없을 경우 0으로 대입
      _counter = (_prefs.getInt('counter') ?? 0);
    });
  }

  _incrementCounter() async {
    setState(() {
      // 카운터 값을 1 증가
      _counter = (_prefs.getInt('counter') ?? 0) + 1;
      // 카운터 최신 값을 SharedPreferences에 counter라는 이름으로 저장
      _prefs.setInt('counter', _counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              // 카운터 값을 설정
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 버튼을 누를 때 마다 _incrementCounter 메소드 호출
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

intState()를 통해 앱이 실행 될 시 asynchronous 로 _loadCounter() 를 실행한다.

해당 매소드는 기기 내부 장치에 데이터가 있는지 확인한 뒤, 있으면 불러오고 없으면

변수 _counter에 0을 넣어준다.

이후 버튼을 누르면 실행되는 _incrementCounter() 메소드 또한 이를 비동기적으로

sharedPreferece를 통해 기기에 저장한다.

간단하쥬~?

https://flutter.dev/docs/development/ui/widgets/cupertino

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) => CupertinoActionSheet(
      title: const Text('Choose Options'),
      message: const Text('Your options are '),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: const Text('One'),
          onPressed: () {
            Navigator.pop(context, 'One');
          },
        ),
        CupertinoActionSheetAction(
          child: const Text('Two'),
          onPressed: () {
            Navigator.pop(context, 'Two');
          },
        )
      ],
      cancelButton: CupertinoActionSheetAction(
        child: const Text('Cancel'),
        isDefaultAction: true,
        onPressed: () {
          Navigator.pop(context, 'Cancel');
        },
      )),
);

특이한 것은 안드로이드에서 cupertino 디자인이 유지된다는 점이다.

ㅋ 재밌네