아래 사진과 같은 AppBar 툴바에 아이콘 버튼을 표시하는 방법에 대해 설명합니다.

예를 들면 이번에는 초기 코드를 개량하여 증감 버튼을 부여한 카운트 앱을 작성합니다.

아이콘 버튼 추가

먼저 아래와 같이 Scaffold 안에 있는 AppBar에 코드를 추가합니다.

      appBar: AppBar(
        title: Text('増減ボタン'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => {},
          ),
          IconButton(
            icon: Icon(Icons.remove),
            onPressed: () => {},
          ),
        ],
      ),

icon: 에서 표시할 아이콘을 선택할 수 있습니다.onPressed 는 아이콘을 탭했을 때의 동작입니다.
여기는 나중에 추가합니다.

이제 실행하면 +와 - 아이콘이 표시됩니다.

값 증감

그러면 이제 만든 아이콘을 탭하여 값을 높이거나 낮출 수 있습니다._incrementCounter() 와 _decrementCounter() 를 각각 작성해, onPressed: 에 추기합시다.
일부 소스 코드의 불필요한 부분은 깎아 있습니다.

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('増減ボタン'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => _incrementCounter(), //追加
          ),
          IconButton(
            icon: Icon(Icons.remove),
            onPressed: () => _decrementCounter(), //追加
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '+ボタンで値が上昇、-ボタンで値が減少します',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

이제 아래 사진과 같이 값의 증감을 할 수 있습니다.



수고하셨습니다.
여기까지 봐 주셔서 감사합니다.