[TAVE/Study] Do it! Flutter 5장 탭바와 리스트 만들기②

210928 화

 

터치 이벤트 처리로 알림 창 띄우기

 

          child: ListView.builder
            (itemBuilder: (context, position) {
              return GestureDetector(
                child:Card(
                  child: Row(
                    children: <Widget>[
                      Image.asset(
                        list![position].imagePath!,
                        height: 100,
                        width: 100,
                        fit: BoxFit.contain,
                      ),
                      Text(list![position].animalName!)
                    ],
                  ),
                ),
                onTap: () {
                  AlertDialog dialog = AlertDialog(
                    content: Text(
                      '이 동물은 ${list![position].kind}입니다',
                      style: TextStyle(fontSize: 30.0),
                    ),
                  );
                  showDialog(
                    context: context,
                    builder: (BuildContext context) => dialog);
                },
              );
          },

👉🏻 터치 이벤트는 GestureDetector위젯을 사용한다. 한 번 터치, 두 번 터치, 길게 누르기 등 다양한 손가락 제스처와 관련된 이벤트를 처리한다.

 

 

동물 추가하는 화면 만들기

 

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

class SecondApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SecondApp();
  List<Animal>? list;
  SecondApp({Key? key, @required this.list}) : super(key: key);
}

class _SecondApp extends State<SecondApp> {
  final nameController = TextEditingController();
  int? _radioValue = 0;
  bool? flyExist = false;
  String? _imagePath;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: nameController,
                keyboardType: TextInputType.text,
                maxLines: 1,
              ),
              Row(
                children: <Widget>[
                  Radio(value: 0, groupValue: _radioValue, onChanged: _radioChange),
                  Text('양서류'),
                  Radio(value: 1, groupValue: _radioValue, onChanged: _radioChange),
                  Text('파충류'),
                  Radio(value: 2, groupValue: _radioValue, onChanged: _radioChange),
                  Text('포유류'),
                ],
              mainAxisAlignment: MainAxisAlignment.spaceAround), //동물 종류 선택 라디오 버튼
              Row(
                children: <Widget>[
                  Text('날 수 있나요?'),
                  Checkbox(
                    value: flyExist,
                    onChanged: (bool? check) {
                      setState(() {
                        flyExist = check;
                      });
                    })
                ],
              mainAxisAlignment: MainAxisAlignment.spaceAround), //날 수 있는지 선택 체크박스
              Row(
                children: <Widget>[
                  GestureDetector(
                    child: Image.asset('repo/images/cow.png', width: 80),
                    onTap: () {
                      _imagePath = 'repo/images/cow.png';
                    },
                  ),
                  GestureDetector(
                    child: Image.asset('repo/images/pig.png', width: 80),
                    onTap: () {
                      _imagePath = 'repo/images/pig.png';
                    },
                  ),
                  GestureDetector(
                    child: Image.asset('repo/images/bee.png', width: 80),
                    onTap: () {
                      _imagePath = 'repo/images/bee.png';
                    },
                  ),
                  GestureDetector(
                    child: Image.asset('repo/images/cat.png', width: 80),
                    onTap: () {
                      _imagePath = 'repo/images/cat.png';
                    },
                  ),
                ],
              mainAxisAlignment: MainAxisAlignment.spaceAround),
              ElevatedButton(
                child: Text('동물 추가하기'),
                onPressed: () {}),
            ]
          ),
        ),
      ),
    );
  }
  _radioChange(int? value) {
    setState(() {
      _radioValue = value;
    });
  }
}

👉🏻 Radio로 라디오 버튼을 만든다. Checkbox로 체크 버튼을 만든다.

✍🏻 =>(화살표)는 _SecondApp()을 반환하는 createState()함수를 호출한다는 의미이다.

✍🏻 라디오 버튼에는 value, groupValue, onChanged 값을 지정해줘야 한다. value는 인덱스 값이고, groupValue는 그룹화, onChanged는 이벤트 처리이다. 미리 선언한 _radioValue를 넣어 초깃값을 0으로 만든다. 라디오 버튼이 눌리면 onChanged의 _radioChange 함수가 실행된다.

✍🏻 mainAxisAlignment: MainAxisAlignment.spaceAround를 이용해 Row 위젯을 양쪽 여백 사이에 균일하게 배치한다.

 

 

가로 리스트뷰로 동물 이미지 추가하기

 

             Container(
                height: 100,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    GestureDetector(
                      child: Image.asset('repo/images/cow.png', width: 80),
                      onTap: () {
                        _imagePath = 'repo/images/cow.png';
                      },
                    ),
                    GestureDetector(
                      child: Image.asset('repo/images/pig.png', width: 80),
                      onTap: () {
                        _imagePath = 'repo/images/pig.png';
                      },
                    ),
                    (...생략...)

👉🏻 scrollDirection을 이용해 방향을 horizontal로 설정해 가로 스크롤을 만든다.

 

 

동물을 목록에 추가하기

 

            ElevatedButton(
                child: Text('동물 추가하기'),
                onPressed: () {
                  var animal = Animal(
                    animalName: nameController.value.text,
                    kind: getKind(_radioValue),
                    imagePath: _imagePath,
                    flyExist: flyExist);
                  AlertDialog dialog = AlertDialog(
                    title: Text('동물 추가하기'),
                    content: Text(
                      '이 동물은 ${animal.animalName}입니다.'
                      '또 동물의 종류는 ${animal.kind}입니다. \n이 동물을 추가하시겠습니까?',
                      style: TextStyle(fontSize: 30.0),
                    ),
                    actions: [
                      ElevatedButton(
                        onPressed: () {
                          widget.list?.add(animal);
                          Navigator.of(context).pop();
                        },
                        child: Text('예'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text('아니요'),
                      ),
                    ],
                  );
                  showDialog(
                    context: context,
                    builder: (BuildContext context) => dialog);
                }),
            ],
          ),
        ),
      ),
    );
  }

👉🏻 AlertDialog로 알림 창을 띄운다.

✍🏻 '예' 버튼을 누르면 동물 리스트에 추가한 다음 알림 창이 꺼지고, '아니요'를 누르면 그냥 꺼진다.