20230328

import 'package:flutter/material.dart';
import 'package:portfolio_gallery/widgets/home/home_main.dart';
import 'package:portfolio_gallery/widgets/home/login_screen.dart';
import 'package:portfolio_gallery/widgets/main/appbar_widget.dart';

import '../widgets/main/drawer_widget.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int currentIndex = 0;

  // 보여줄 페이지 리스트를 만들어주세요
  final List<Widget> _pages = [
    HomeMain(),
    const LoginScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppbarHome(),
      drawer: const Drawer(
        child: DrawerMain(),
      ),
      bottomNavigationBar: mainBottom(),
      backgroundColor: Colors.black,
      body: _pages[currentIndex],
    );
  }

  BottomNavigationBar mainBottom() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed, // Fixed
      backgroundColor: Colors.black,
      currentIndex: currentIndex,
      onTap: _onItemTapped, // 배경 색상
      selectedItemColor: Colors.white, // 선택된 아이콘과 텍스트 색상
      unselectedItemColor: Colors.grey,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
          ),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.filter_alt_rounded),
          label: 'filter',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: 'Subscribe',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.mail_rounded),
          label: 'Message',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        ),
      ],
    );
  }
}

모든 코드를 분리해서 파일마다 저장하고자 했던 것은 욕심이였다.

bottom 위젯을 그냥 합쳐버리니 이렇게 편한 것을...

 

하지만, 지금은 인덱스를 벗어난 아이콘을 클릭할 때에, 오류가 발생한다.

이를 _pages를 변경해 page와 BottomNavigationBarItem을 동시에 제공하도록 변경하여 오류의 싹을 잡고자 한다.

 

기왕 하는거 화면 전체를 옆으로 밀어내면서 전환하는 느낌이 나면 더 좋겠지만, 그런 디테일은 조금 나중에 고민해보도록 하자.

 

일종의 사전자료형 리스트로 만들어버리면 어떨까 싶다.

현재는 List<Widget> 이 각각 따로 있는데, Map으로 Widget과 BottomNavigationBarItem 위젯을 구분하여 꺼내올 수 있도록 해보자.

 

List<List<Widget>>이 나을까, List<Map<String, Widget>>이 나을까?

 

일단 List<Map<String, Widget>> 이렇게 해준다.

근데, 

as Widget, as BottomNavigationBarItem을 해주어야 한다.

import 'package:flutter/material.dart';
import 'package:portfolio_gallery/widgets/home/home_main.dart';
import 'package:portfolio_gallery/widgets/home/login_screen.dart';
import 'package:portfolio_gallery/widgets/main/appbar_widget.dart';

import '../widgets/main/drawer_widget.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int currentIndex = 0;
  List<Map<String, Object>> bottomScreenItems = [
    {
      'screen': HomeMain(),
      'bottomBarItem': const BottomNavigationBarItem(
        icon: Icon(
          Icons.home,
        ),
        label: 'Home',
      ),
    },
    {
      'screen': const LoginScreen(),
      'bottomBarItem': const BottomNavigationBarItem(
        icon: Icon(Icons.filter_alt_rounded),
        label: 'filter',
      ),
    },
    {
      'screen': const LoginScreen(),
      'bottomBarItem': const BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Subscribe',
      ),
    },
    {
      'screen': const LoginScreen(),
      'bottomBarItem': const BottomNavigationBarItem(
        icon: Icon(Icons.mail_rounded),
        label: 'Message',
      ),
    },
    {
      'screen': const LoginScreen(),
      'bottomBarItem': const BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    },
  ];

  void _onItemTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppbarHome(),
      drawer: const Drawer(
        child: DrawerMain(),
      ),
      bottomNavigationBar: mainBottom(),
      backgroundColor: Colors.black,
      body: bottomScreenItems[currentIndex]['screen'] as Widget,
    );
  }

  BottomNavigationBar mainBottom() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed, // Fixed
      backgroundColor: Colors.black,
      currentIndex: currentIndex,
      onTap: _onItemTapped, // 배경 색상
      selectedItemColor: Colors.white, // 선택된 아이콘과 텍스트 색상
      unselectedItemColor: Colors.grey,
      items: bottomScreenItems
          .map<BottomNavigationBarItem>((bottomScreenItem) =>
              bottomScreenItem['bottomBarItem'] as BottomNavigationBarItem)
          .toList(),
    );
  }
}

 

근데 아까 봤던것처럼 클래스화 시켜버리는것도 괜찮을지도...?

로그인 상태에 따라 다르게 동작하는건 아직 고민이 필요할 듯.

 

근데 로그인 상태를 어떻게 확인하지?

User에서 회원탈퇴는 delete 말고 enable T/F로 구분을 하는게 나을 수도 있을것 같다.

 

일단 회원가입 기능부터 구현해주면 좋을 것 같다.

근데 로그인 상태를 확인을 해야 어떻게 페이지를 이동할지 알 수 있을텐데...