[Clone Coding] Netflix를 따라서 만들어보자! -인프런 강의

netflix

 

본 글은 제가 나중에 다시 보기 위해 작성한 글 입니다.

 

 

 

main.dart

 

import 'package:clone_netflix/Screen/home_screen.dart';
import 'package:clone_netflix/Widget/bottom_bar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TabController controller;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OhsureBoy',
      theme: ThemeData(brightness: Brightness.dark,primaryColor: Colors.black,accentColor: Colors.white),

      home: DefaultTabController(length: 4,
        child: Scaffold(
          body: TabBarView(physics: NeverScrollableScrollPhysics(),
          children: <Widget>[
            HomeScreen(),
            Container(child: Center(child: Text('Search'),),),
            Container(child: Center(child: Text('Save'),),),
            Container(child: Center(child: Text('More'),),)
          ],),
          bottomNavigationBar: Bottom(),
        ),),
    );
  }
}

 

DefaultTabController로 4개의 탭을 컨트롤 할겁니다.

아래 네이게이터는 Bottom()으로 따로 만들었습니다.

여기서 눈 여겨 볼만한 건 딱히 없는 것 같습니다.

 

NeverScrollableScrollPhysic는 사용자가 스크롤을 컨트롤 할 수 없다는 것 입니다.

 

반응형

---

bottom_bar.dart

 

import 'package:flutter/material.dart';

class Bottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Container(
        height: 70,
        child: TabBar(labelColor: Colors.white60,
        indicatorColor: Colors.transparent,
        tabs: <Widget>[
          Tab(icon: Icon(
            Icons.home,
            size: 22,
          ),
          child: Text(
            '홈',
            style: TextStyle(fontSize: 9),
          ),),
          Tab(icon: Icon(
            Icons.search,
            size: 22,
          ),
            child: Text(
              '검색',
              style: TextStyle(fontSize: 9),
            ),),
          Tab(icon: Icon(
            Icons.save,
            size: 22,
          ),
            child: Text(
              '저장한 컨텐츠 목',
              style: TextStyle(fontSize: 9),
            ),),
          Tab(icon: Icon(
            Icons.list,
            size: 22,
          ),
            child: Text(
              '더보기',
              style: TextStyle(fontSize: 9),
            ),)
        ],)
      ),
    );
  }
}

 

바텀 내비게이터.

Tab으로 만들어 준다는 것을 알 수 있습니다. 

이걸 잘 활용하면 변경해서 제 입맛대로 만들 수 있어서 저장합니다.

 

반응형

---

carousel_slider.dart

 

import 'package:carousel_slider/carousel_slider.dart';
import 'package:clone_netflix/Model/Model_movie.dart';
import 'package:flutter/material.dart';

class CarouselImage extends StatefulWidget {
  final List<Movie> movies;

  CarouselImage({this.movies});

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

class _CarouselImageState extends State<CarouselImage> {
  List<Movie> movies;
  List<Widget> images;
  List<String> keywords;
  List<bool> likes;

  int _currentPage = 0;
  String _currentKeyword;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    movies = widget.movies;
    images = movies.map((e) => Image.asset('./images/' + e.poster)).toList();
    keywords = movies.map((e) => e.keyword).toList();
    likes = movies.map((e) => e.like).toList();

    _currentKeyword = keywords[0];
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(20),
          ),
          CarouselSlider(
            items: images,
            options: CarouselOptions(onPageChanged: (index, reason) {
              setState(() {
                _currentPage = index;
                _currentKeyword = keywords[_currentPage];
              });
            }),
          ),
          Container(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 3),
            child: Text(
              _currentKeyword,
              style: TextStyle(fontSize: 11),
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                  child: Column(
                    children: <Widget>[
                      likes[_currentPage]
                          ? IconButton(
                              icon: Icon(Icons.check),
                              onPressed: () {},
                            )
                          : IconButton(
                              icon: Icon(Icons.add),
                              onPressed: () {},
                            ),
                      Text(
                        '내가 찜한 콘텐츠',
                        style: TextStyle(fontSize: 11),
                      )
                    ],
                  ),
                ),
                Container(
                    padding: EdgeInsets.only(right: 10),
                    child: FlatButton(
                      color: Colors.white,
                      onPressed: () {},
                      child: Row(
                        children: <Widget>[
                          Icon(
                            Icons.play_arrow,
                            color: Colors.black,
                          ),
                          Padding(
                            padding: EdgeInsets.all(3),
                          ),
                          Text(
                            '재생',
                            style: TextStyle(color: Colors.black),
                          )
                        ],
                      ),
                    )),
                Container(
                  padding: EdgeInsets.only(right: 10),
                  child: Column(
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.info),
                        onPressed: () {},
                      ),
                      Text(
                        '정보',
                        style: TextStyle(fontSize: 11),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: makeIndicator(likes, _currentPage),
            ),
          )
        ],
      ),
    );
  }
}

List<Widget> makeIndicator(List list, int _currentPage) {
  List<Widget> result = [];

  for (var i = 0; i < list.length; i++) {
    result.add(Container(
      width: 8,
      height: 8,
      margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: _currentPage == i
            ? Color.fromRGBO(255, 255, 255, 0.9)
            : Color.fromRGBO(255, 255, 255, 0.4),
      ),
    ));
  }
  return result;
}

 

이 부분이 좀 낮설었다. List<Widget>을 만들어서 따로 컨트롤 하는 부분을 만들 수 있구나 하는 생각과 여러가지 활용이 가능하다는 것.