Flutter 샘플 앱에 손 추가

5906 단어 Flutter

전회까지의 복습과 이번에하고 싶은 일



앱을 시작할 수 있었으므로, 감산 버튼을 추가한다.

변경점



먼저 감산을 위한 함수를 추가합니다.

뺄셈을 위한 함수 추가
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  //--- 追加ここから
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }
  //--- 追加ここまで


다음에 감산용의 버튼을 추가합니다만…

안 좋은 예
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),

      //--- 追加ここから
      floatingActionButton: FloatingActionButton(
        onPressed: _decrementCounter,
        tooltip: 'Decrement',
        child: const Icon(Icons.remove),
      //--- 追加ここまで

오류가 발생합니다.
분명히 FloatingActionButton은 하나만 사용할 수있는 것 같습니다. (참고)

리굴은 알 수 없습니다. 공부가 필요하네요...
참고 사이트를 베이스로, 이하와 같이 변경해 갑니다.

세로로 정렬
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FloatingActionButton(
            backgroundColor: Colors.red,
            onPressed: () {
              _decrementCounter();
            },
            tooltip: 'Decrement',
            child: const Icon(Icons.remove),
          ),
          Container(
            margin: const EdgeInsets.only(),
            child: FloatingActionButton(
              backgroundColor: Colors.blue,
              onPressed: () {
                _incrementCounter();
              },
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          ),
        ],
      ),




이제 더하기와 빼기 버튼이 추가되었습니다.

좋은 웹페이지 즐겨찾기