내가 보려고 쓰는 Flutter 일기
참고1: https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
참고2: Doit! 플러터 앱프로그래밍 (9단원) - 조준수, [이지스퍼블리싱]

FloatingActionButton

오늘 배워볼 위젯은 FloatingActionButton.
Scaffold.floatingActionButton에 사용하는 위젯이고, 화면 하단에 둥근 버튼이 하나 생긴다. 다른 버튼과 마찬가지로 onPressed 속성을 설정하지 않으면, 못 쓰는 버튼이 된다.(터치에 반응하지 않는다.)

플러터 프로젝트를 생성하면 이미 코드가 적혀 있는데, floatingActionButton을 이용한 코드이다.
해당 버튼(+)을 누르면 화면의 숫자가 증가한다.

코드 예시로 알아보자

floatingActionButton

공식 페이지의 코드를 가져다가 조금만 변형해보았다.

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyHomePage(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Floating Action Button'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '좋아요 버튼 눌러주세요!',
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 30,
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 50),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          _incrementCounter();
        },
        label: const Text('좋아요'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.pink,
      ),
    );
  }
}

보통은 FloatingActionButton을 쓰는데, extended라는 생성자가 하나 더 있다. 그냥 글자를 넣을 수 있다는 정도? 실행해보면 아래와 같다.

최초 화면	버튼 10번 클릭 이후

화면 하단에 navigationbar를 추가하고 싶은데, floatingActionButton을 네비게이션바와 겹치게 하고 싶다면 아래의 코드를 floatingActionButton 아래에 추가하면 된다.

bottomNavigationBar: BottomAppBar(
        color: Colors.orangeAccent,
        child: Container(height: 50,),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 

실행하면 아래와 같다.

FloatingActionButtonLocation.centerDocked	FloatingActionButtonLocation.endDocked

앱을 다시 실행해도 '좋아요' 횟수가 그대로일 수는 없나?

플러터 프로젝트를 맨 처음 생성했을 때 나타나는 코드에서는 내가 floatingActionButton을 누른 횟수가 어딘가에 저장되지 않는다. 즉, 애뮬레이터 상에서 앱을 종료했다가 다시 켜면 0으로 초기화된다는 것이다.

버튼을 누른 횟수를 저장해서, 앱을 다시 실행해도 그 횟수에서 다시 더해지게끔 하고 싶다면? 공유 환경설정을 이용해보자. (Doit! 플러터 앱프로그래밍 (9단원) 을 읽고 작성하였다.)

SharedPreferences

적은 양의 간단한 데이터를 저장하는 용도로 사용하며, SharedPreferences가 제공하는 파일은 키-값 쌍으로 구성된 데이터를 포함한다.

아래와 같이 코드를 수정해보자.

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

//_counter의 값을 저장하기
  void setData(int value) async{
    var key='_counter';
    SharedPreferences sp=await SharedPreferences.getInstance();
    sp.setInt(key, value);
  }
  
//_counter의 값을 불러오기
  void loadData() async{
    var key='_counter';
    SharedPreferences sp=await SharedPreferences.getInstance();
    setState(() {
      var value=sp.getInt(key);
      if(value==null)
        _counter=0;
      else
        _counter=value;
    });
  }
  void _incrementCounter() {
    setState(() {
      _counter++;
      setData(_counter);
    });
  }

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

//build 함수는 변경없음!
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Floating Action Button'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '좋아요 버튼 눌러주세요!',
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 30,
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 50),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          _incrementCounter();
        },
        label: const Text('좋아요'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.pink,
      ),
      bottomNavigationBar: BottomAppBar(
        color: Colors.orangeAccent,
        child: Container(height: 50,),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

앱을 실행할 때, 이전까지의 _counter 값을 알아야 하므로 initState에 loadData 함수를 추가한다.
그리고 버튼을 누를 때 마다 공유 환경 설정 파일에 저장되어 있는 _counter 값을 변경해야 하므로, _incrementCounter() 함수에 setData() 함수를 추가한다.

실행화면을 보자.

위와 같이 애뮬레이터 상에서 앱을 종료해도 누른 횟수가 그대로인 것을 알 수 있다.






오늘의 일기는 여기까지!