[Flutter] Project 01-01

Flutter Project NoOneMad 

메인 홈 화면 만들기

1. 프로젝트 생성 

- 기타 버전, 실행 문제는 알아서 했다. (껏다 켰다, 테스트기기 연결했다 안했다. 등등 하다보면 된다.) 

- 해당 문제점들은 bugs life에 정리되어있음. (만약 발생하면)

 

2. 첫 메인 코드 및 화면 구성 

void main() => runApp(MainPage());  //앱이 실행되면 처음 실행할 클래스

class MainPage extends StatelessWidget { //화면 변화가 필요없다? 나중에 바꿔야하려나 
  @override
  Widget build(BuildContext context) {
    return MaterialApp( //머터리얼 앱이다.
      title: '하고싶은 이름',
      theme: ThemeData(primaryColor: Colors.원하는 색상),
      home: Home(),  //해당 클래스로 홈 화면을 설정
    );
  }
}

3. 하단 네비게이션 바 생성

import 'package:titled_navigation_bar/titled_navigation_bar.dart';

class Home extends StatefulWidget { //상태변화 클래스로 사용 (이미지슬라이더 때문)
  @override 
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold( //스케폴드 사용
      appBar: AppBar( //상단 앱바 구성
        title: Text("Home"),
      ),
      backgroundColor: Colors.white,
      bottomNavigationBar: TitledBottomNavigationBar( //네비 패키지를 사용
          currentIndex: 1,
          activeColor: Colors.원하는색,
          inactiveColor: Colors.원하는 색,
          reverse: false, //글자먼저 보일지, 아이콘 먼저 보일지 인듯
          curve: Curves.easeInBack, 
          onTap: (index) {
            print("선택 메뉴는 $index 입니다.");
          },
          items: [  //해당 패키지를 통한 네비게이션 리스트 생성
            TitledNavigationBarItem(title: Text('Home'), icon: Icons.photo_library),
            TitledNavigationBarItem(title: Text('Travel'), icon: Icons.send),
            TitledNavigationBarItem(title: Text('Store'), icon: Icons.store),
            TitledNavigationBarItem(title: Text('MY'), icon: Icons.account_circle)
          ]),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, //가운데로
          children: <Widget>[Text("Hello")],  //텍스트만 띄운다
        ),
      ),
    );
  }
}

4. 이미지 슬라이더 생성 

 

5. 네이게이션 화면이동