쿠퍼티노 위젯으로 동물 소개 앱 만들기

탭바 만들기

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

class CupertinoMain extends StatefulWidget {
  const CupertinoMain({Key? key}) : super(key: key);

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

class _CupertinoMainState extends State<CupertinoMain> {

  late CupertinoTabBar tabBar;

  @override
  void initState(){
    super.initState();
    
    // 탭바생성
    tabBar = CupertinoTabBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(CupertinoIcons.home),),
          BottomNavigationBarItem(icon: Icon(CupertinoIcons.add),),
        ]);
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoTabScaffold(
        tabBar: tabBar,
        //                    ↱탭 클릭시 해당하는 탭의 인덱스 들어옴
        tabBuilder: (context, value){
          if(value == 0){
            return Container(
              child: Center(
                child: Text('쿠퍼티노 탭 1'),
              ),
            );
          } else{
            return Container(
              child: Center(
                child: Text('쿠퍼티노 탭 2'),
              ),
            );
          }
        },
      ),
    );
  }
}

 

 

 

---

---

쿠퍼티노 리스트뷰 만들기

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

class CupertinoFirstPage extends StatelessWidget {
  const CupertinoFirstPage({Key? key, required this.animalList}) : super(key: key);

  final List<Animal> animalList;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('동물리스트!!'),
      ),
      child: ListView.builder(
        itemBuilder: (context, index){
          return Container(
            padding: EdgeInsets.all(5),
            height: 100,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Image.asset(
                      animalList[index].imagePath,
                      fit: BoxFit.contain,
                      width: 80,
                      height: 80,
                    ),
                    Text(animalList[index].animalName)
                  ],
                ),
                Container(
                  height: 2,
                  color: CupertinoColors.systemGrey,
                ),
              ],
            ),
          );
        },itemCount: animalList.length,
      ),
    );
  }
}

 

 

 

 

---

 

cupertinoMain.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:psw1/animalItem.dart';
import 'package:psw1/iosSub/cupertinoFirstPage.dart';
import 'package:psw1/iosSub/cupertinoSecondPage.dart';

class CupertinoMain extends StatefulWidget {
  const CupertinoMain({Key? key}) : super(key: key);

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

class _CupertinoMainState extends State<CupertinoMain> {

  late CupertinoTabBar tabBar;
  List<Animal> animalList = <Animal>[];

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

    // 탭바생성
    tabBar = CupertinoTabBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(CupertinoIcons.home),),
          BottomNavigationBarItem(icon: Icon(CupertinoIcons.add),),
        ]);

    // 동물 리스트 만들기
    animalList.add(Animal(imagePath: 'repo/images/bee.png', animalName: '벌', kind: '곤충'));
    animalList.add(Animal(imagePath: 'repo/images/cat.png', animalName: '고양이', kind: '포유류'));
    animalList.add(Animal(imagePath: 'repo/images/cow.png', animalName: '젖소', kind: '포유류'));
    animalList.add(Animal(imagePath: "repo/images/dog.png", animalName: "강아지", kind: "포유류"));
    animalList.add(Animal(imagePath: "repo/images/fox.png", animalName: "여우", kind: "포유류"));
    animalList.add(Animal(imagePath: "repo/images/monkey.png", animalName: "원숭이", kind: "영장류"));
    animalList.add(Animal(imagePath: "repo/images/pig.png", animalName: "돼지", kind: "포유류"));
    animalList.add(Animal(imagePath: "repo/images/wolf.png", animalName: "늑대", kind: "포유류"));

  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoTabScaffold(
        tabBar: tabBar,
        //                    ↱탭 클릭시 해당하는 탭의 인덱스 들어옴
        tabBuilder: (context, value){
          if(value == 0){
            return CupertinoFirstPage(
                animalList: animalList
            );
          } else{
            return CupertinoSecondPage(
              animalList: animalList,
            );
          }
        },
      ),
    );
  }
}

 

 

---

cupertinoFirstPage.dart

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

class CupertinoFirstPage extends StatelessWidget {
  const CupertinoFirstPage({Key? key, required this.animalList}) : super(key: key);

  final List<Animal> animalList;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('동물리스트!!'),
      ),
      child: ListView.builder(
        itemBuilder: (context, index){
          return Container(
            padding: EdgeInsets.all(5),
            height: 100,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Image.asset(
                      animalList[index].imagePath,
                      fit: BoxFit.contain,
                      width: 80,
                      height: 80,
                    ),
                    Text(animalList[index].animalName)
                  ],
                ),
                Container(
                  height: 2,
                  color: CupertinoColors.systemGrey,
                ),
              ],
            ),
          );
        },itemCount: animalList.length,
      ),
    );
  }
}

 

 

 

---

cupertinoSecondPage.dart

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


class CupertinoSecondPage extends StatefulWidget {
  const CupertinoSecondPage({Key? key, required this.animalList}) : super(key: key);

  final List<Animal> animalList;

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

class _CupertinoSecondPageState extends State<CupertinoSecondPage> {

  TextEditingController? _textController;  // 동물 이름
  // TextEditingController _textController = TextEditingController();
  int _kindChoice = 0;                                // 동물 종류
  bool _flyExist = false;                             // 날개 유무
  String? _imagePath;                             // 동물 이미지

  // 세그먼트 위젯에 구성할 내용 담기
  Map<int, Widget> segmentWidgets ={
    0:SizedBox(
      child: Text('양서류', textAlign: TextAlign.center,),
      width: 80,
    ),
    1:SizedBox(
      child: Text('포유류', textAlign: TextAlign.center,),
      width: 80,
    ),
    2:SizedBox(
      child: Text('파충류', textAlign: TextAlign.center,),
      width: 80,
    ),
  };

  @override
  void initState(){
    super.initState();
    _textController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {

    dynamic getKind(int radioValue){
      switch (radioValue){
        case 0:
          return '양서류';
        case 1:
          return '파충류';
        case 2:
          return '포유류';
      }
    }

    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('동물 추가'),
      ),


      //     ↱머테리얼 디자인은 제일 상위에 SafeArea를 함...
      child: SafeArea(
        child: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(0),
                  child: CupertinoTextField(
                    controller: _textController,
                    keyboardType: TextInputType.text,
                    maxLines: 1,
                  ),
                ),

                CupertinoSegmentedControl(
                  padding: EdgeInsets.only(bottom: 20, top: 20),
                  groupValue: _kindChoice,
                  children: segmentWidgets,
                  onValueChanged: (int value){
                    setState(() {
                      _kindChoice = value;
                    });
                  }),

                Row(
                  children: <Widget>[
                    Text('날개 있음?'),
                    CupertinoSwitch(
                      value: _flyExist,
                      onChanged: (value){
                        setState(() {
                          _flyExist = value;
                        });
                      }
                    ),
                  ],
                  mainAxisAlignment: MainAxisAlignment.center,
                ),
                SizedBox(
                  height: 100,
                  child: ListView(
                    // ↱ListView를 가로로 스크롤 가능하게 해줌
                    scrollDirection: Axis.horizontal,
                    children: <Widget>[
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath=='repo/images/cow.png'?  Colors.blue : Colors.white,
                            child: Image.asset('repo/images/cow.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/cow.png';

                          });
                        },
                      ),
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath=='repo/images/pig.png'?  Colors.blue : Colors.white,
                            child: Image.asset('repo/images/pig.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/pig.png';
                          });
                        },
                      ),
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath=='repo/images/bee.png'? Colors.blue : Colors.white,
                            child: Image.asset('repo/images/bee.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/bee.png';
                          });
                        },
                      ),
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath=='repo/images/cat.png'? Colors.blue : Colors.white,
                            child: Image.asset('repo/images/cat.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/cat.png';
                          });
                        },
                      ),
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath=='repo/images/dog.png'? Colors.blue : Colors.white,
                            child: Image.asset('repo/images/dog.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/dog.png';
                          });
                        },
                      ),
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath =='repo/images/fox.png'? Colors.blue : Colors.white,
                            child: Image.asset('repo/images/fox.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/fox.png';
                          });
                        },
                      ),
                      GestureDetector(
                        child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            color: _imagePath=='repo/images/monkey.png'? Colors.blue : Colors.white,
                            child: Image.asset('repo/images/monkey.png', width: 80,)),
                        onTap: (){
                          setState(() {
                            _imagePath = 'repo/images/monkey.png';
                          });
                        },
                      ),
                    ],
                  ),
                ),
                CupertinoButton(
                    child: Text('동물 추가하기'),
                    onPressed: (){
                      widget.animalList.add(Animal(
                          imagePath: _imagePath!,
                          animalName: _textController!.value.text,
                          kind: getKind(_kindChoice),
                          flyExist: _flyExist));
                    }
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}