[Flutter] 숫자 counter 만들기 <like iOS stepper>

우선 iOS에서 쓰던 stepper는 숫자 증감의 객체 였는데, 

flutter에서의 stepper는 아래 사진 처럼 음.. stepper다..  (타임 라인 작성할 때 사용하기 좋다...?!)

참 설명하기는 어렵지만 아래 사진을 보면 분명히 구분 된다. 

 

왼쪽 : flutter에서 stepper 오른쪽 : iOS에서 stepper

 

그렇다면 iOS 처럼 숫자 counter에 사용 할 만한 객체가 flutter에 있는가? 

결론은 없다. 

직접 만들어야 한다. 

 

뭐, 아래 플러그인이 존재 한다. 

https://pub.dev/packages/counter_button

counter_button | Flutter Package

 

하지만, 확장성을 위해서는 만들어 쓰는게 좋을 거 같다. 

 

정답은 없고, 언제나 확장 가능하게 또 상황에 맞게 수정하여 사용 하면 될 것 같다. 

 

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

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

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              onPressed: () {
                _decrementCounter();
              },
              icon: Icon(Icons.remove),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            IconButton(
              onPressed: () {
                _incrementCounter();
              },
              icon: Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

 

 

그럼 위 처럼 - + 버튼으로 구동이 가능하다. 

 

코드를 사용 할 거라면, 아래 코드만 사용하여 원하는 액션에서 함수를 호출 해주면 된다!

  int _counter = 0;

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

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

 

다만 범위를 지정하는게 좀 번거롭다... 

_incrementCounter /  _decrementCounter 함수에서 숫자 범위 체크를 하여 state를 변경한다. 

 

if 문으로 간단히 작성하는 거라 포스팅에서는 제외한다. 

 

다시한번 느끼지만, 나에게는 iOS 개발이 좀 더 쉬운것 같다.