[go: nahoru, domu]

Skip to content

matebe12/animal_find_flutter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

findanimal

플러터 경기도 유기견 찾기


스터디 주별 목표

      1주 기본 화면 구축 및 시 별 검색
      2주 검색 결과 및 상세 보기 테마

LayoutBuilder로 기기 크기에 맞춰준다. getx를 사용하기 때문에 getmaterialApp으로 감싸준다


void main() {
  runApp(LayoutBuilder(
    builder: (context, constraints) {
      return GetMaterialApp(
        home: Home(),
        title: '경기도 유기동물',
      );
    },
  ));
}


bottomnavigator 구축


List _children = [
    FindScreen(),
    FindScreen(),
  ];
  int currentIndex = 0;
  ListQueue _navigationQueue = ListQueue();


메뉴 클릭 시 큐에 쌓는다 인덱스 같다면 쌓지않는다




void changeMenu(int index) {
    if (index != currentIndex) {
      _navigationQueue.removeWhere((element) => element == index);
      _navigationQueue.addLast(index);
      setState(() {
        currentIndex = index;
      });
      print(_navigationQueue);
    }
  }
  //뒤로가기 누를시 전의 메뉴로 이동하고 큐를 지운다 큐가 비어졌다면 종료 알림응 보여준다
  Future _onWillPop() async {
    //Navigator.of(context).pop();
    if (_navigationQueue.isEmpty) {
      return showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('확인'),
          content: Text('앱을 종료 하시겠습니까?'),
          actions: [
            FlatButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                child: Text('네')),
            FlatButton(
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
                child: Text('아니오')),
          ],
        ),
      );

      //return true;
    }
     setState(() {
      _navigationQueue.removeLast();
      int position = _navigationQueue.isEmpty ? 0 : _navigationQueue.last;
      currentIndex = position;
    });
    return false;

  }

다른 메뉴 이동시에 전 메뉴의 화면 상태 보존을 위해 indexedStack을 사용한다



Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: IndexedStack(
        index: currentIndex,
        children: _children,
      ),
      bottomNavigationBar: Wrap(children: [
        WillPopScope(
          child: BottomNavigationBar(
            backgroundColor: Color(0xFF74a4f2),
            selectedLabelStyle: TextStyle(fontFamily: 'NanumPen'),
            unselectedLabelStyle: TextStyle(fontFamily: 'NanumPen'),
            currentIndex: currentIndex,
            selectedItemColor: Colors.white,
            unselectedItemColor: Color(0xff767e88),
            type: BottomNavigationBarType.fixed,
            onTap: changeMenu,
            elevation: 5,
            iconSize: 30,
            selectedFontSize: 18,
            unselectedFontSize: 18,
            items: [
              BottomNavigationBarItem(

                  icon: Icon(Icons.dashboard_outlined), label: '홈', ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.list_alt_outlined),label: '두번째 탭'),
            ],
          ),
          onWillPop: _onWillPop,
        ),
      ]),
    );
  }

그리드뷰

SliverGridDelegateWithMaxCrossAxisExtent 는 넓이 지정

childAspectRatio 는 너비/넓이에 따라 항목의 크기를 결정

maxCrossAxisExtent는 최대 넓이

GridView.builder(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 0.95,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: 20,
            itemBuilder: (BuildContext ctx, index) {
              return Card(elevation: 2, child: Center(child: Text('$index ')));
            })

About

animal_find_flutter

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages