[Flutter] 왓챠피디아 - 프로젝트 세팅 - ( week 4 )

왓챠피디아 앱 구현

프로젝트 준비

• 새로운 Flutter 프로젝트 생성
• provider 패키지 설치
• 파일 추가 생성 : book.dart, book_service.dart

 

베이스 코드 작성

main.dart

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'book_service.dart';

void main() {

  runApp(

    MultiProvider(

      providers: [

        ChangeNotifierProvider(create: (context) => BookService()),

      ],

      child: const MyApp(),

    ),

  );

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

class HomePage extends StatefulWidget {

  HomePage({Key? key}) : super(key: key);

  @override

  State<HomePage> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  var bottomNavIndex = 0;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: [

        SearchPage(),

        LikedBookPage(),

      ].elementAt(bottomNavIndex),

      bottomNavigationBar: BottomNavigationBar(

        selectedItemColor: Colors.black,

        unselectedItemColor: Colors.grey,

        showUnselectedLabels: true,

        selectedFontSize: 12,

        unselectedFontSize: 12,

        iconSize: 28,

        type: BottomNavigationBarType.fixed,

        onTap: (value) {

          setState(() {

            bottomNavIndex = value;

          });

        },

        items: [

          BottomNavigationBarItem(

            icon: Icon(Icons.search),

            label: '검색',

          ),

          BottomNavigationBarItem(

            icon: Icon(Icons.star),

            label: '좋아요',

          ),

        ],

        currentIndex: bottomNavIndex,

      ),

    );

  }

}

class SearchPage extends StatelessWidget {

  SearchPage({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        backgroundColor: Colors.white,

        toolbarHeight: 80,

        title: TextField(

          onSubmitted: (value) {},

          cursorColor: Colors.grey,

          decoration: InputDecoration(

            prefixIcon: Icon(Icons.search, color: Colors.grey),

            hintText: "작품, 감독, 배우, 컬렉션, 유저 등",

            border: OutlineInputBorder(

              borderSide: BorderSide(color: Colors.white),

              borderRadius: BorderRadius.all(Radius.circular(10)),

            ),

            focusedBorder: OutlineInputBorder(

              borderSide: BorderSide(color: Colors.grey),

              borderRadius: BorderRadius.all(Radius.circular(10)),

            ),

          ),

        ),

      ),

      body: Center(

        child: Text("검색"),

      ),

    );

  }

}

class LikedBookPage extends StatelessWidget {

  const LikedBookPage({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Text("좋아요"),

      ),

    );

  }

}

 

book.dart

class Book {}

 

book_service.dart

import 'package:flutter/material.dart';

import 'book.dart';

class BookService extends ChangeNotifier {

  List<Book> bookList = []; // 책 목록

}

 

에뮬레이터를 켜고 앱을 실행시켜 본다.

 

 

앱을 실행하고 화면이 확인되면 준비완료