Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Mobile Application Development

Flutter + FirebaseでNetflix UIクローンをコーディングする[ランダムフラッター]

このレッスンは、FlutterとFirebaseでNetflix UIをクローンコーディングするレッスンです! 最も速くアプリ開発を学ぶためのFlutterを始めましょう:)

  • taebbong
Flutter
Clone Coding
Firebase
Thumbnail

学習した受講者のレビュー

こんなことが学べます

  • ランダムに従い、FlutterでUIを設定する

  • Netflix蒸し機能まで含むクローンコーディング

  • FlutterとFirebaseを連携してデータをインポートする

  • さまざまなFlutterパッケージの使い方

ネットフリックスクローンコーディング!
フラッターで素早く優れたネイティブアプリを作成しましょう。

最速のアプリ開発を開始する方法、Flutter

Flutterは、Googleが開発したアプリ/ウェブ/デスクトップアプリ開発フレームワークです。
当初はDartという不慣れな言語による難しさがありましたが、React Nativeをしっかりと上回るアプリのパフォーマンスと開発速度を誇り、大きな人気を集めています。

Flutterに触れた多くの開発者は、ネイティブアプリの開発をFlutterが十分に置き換えることができると判断しました。

今、Netflix UIに沿って作成し、Flutterをすばやく学びましょう!

💡川の特徴

フルレクチャーFULL字幕!クイックコード進行!

(序盤4つの講義の編集クオルやスピードが良くありません😭😭以降講義はスムーズです。!!)

「ランダムフラッター」の講義は、各コードの説明を最小限に抑え、一度コードに沿って見て、各自が悩んで勉強する形の講義です。

講義には説明が不足することがあり、後で本講義に出てくるウィジェットやロジックに対する講義を別にアップロードする予定であり、基本的な概念に対する理解がまず必要な方にはうまく合わないことがあります。

後で「汲み上げるフラッター」講義でさらに詳しく、Kindの説明を進めます!

✏️この講義で学ぶこと

講義では、次の内容を学ぶことができます!

☑️FlutterでUIを設定する方法
☑️FlutterとFirebase Firestoreを連動してデータをやり取りする方法
☑️ボトムタブバー構造のFlutterアプリを作成する方法

📖このレッスンの後に完成するNetflix UI

講義が終わったら、以下のNetflix UIを完成させることができます:)
(ロゴ画像はGuinnessが作ってくれました!ありがとうございます😊😊)

🛠必要な開発環境

Flutterで開発できる環境なら何でも大丈夫です!
別途説明講義がありませんので、あらかじめご用意お願い致します:)

フラッター開発環境の設定

私の開発環境は次のとおりです。

OS: Mac OS Mojave / iOS Simulator
SDK: Flutter SDK 1.12.13+hotfix.8
Editor: VS code
VS code extensions: Dart / Flutter / Rainbow Brackets

🛠講義資料室

完全なソースコードレポ: https://github.com/TaeBbong/netflix-clone-lecture

講義回差別ソースコード: https://taebbong.github.io

(YouTubeでも見ることができます!)無料講義YouTubeリンク: https://bit.ly/33BYAlD

🙋🏻‍♂️予想される質問QnA

Q. 必ず講義で出てくるとおりに作らなければなりませんか?
A. 講義者も開発を上手にする人ではなく、悪いコードが書かれている可能性があります。また、Flutterのキャリアが長くなく、時には必要ないコードなどがあるかもしれません😭😭もっと勉強して、今後発展したコードと講義をお見せします:)

Q. Flutterのウィジェットが気になります!
A. Flutterでは、すべてがウィジェットです!大きくは画面単位から、小さくは一つのテキストであってもFlutterはウィジェットとみなしています。他の開発フレームワークでのコンポーネントほど理解すれば良いと思います。

Q. Flutterの状態管理が気になります
A. Flutterでは、StatefulWidgetとcreateState()で最も基本的な方法の状態管理を行います。後でさらに発展させるために、ブロック、プロバイダなどの方法を学びましょう!

💡講義が気に入ったら..!

本講義は無料で行われる講義であるだけに、講義製作者は皆さんの応援と励ましのおかげで一生懸命働けます!

講義が気に入ったらコーヒー一杯(クリック)お願いします:)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 無作為に従って作ってみる講義が好きな人

  • 初めてFlutterに触れる人

  • 基礎的な開発知識を持っている人

  • 一度試してみて悩むのが好きな人

前提知識、
必要でしょうか?

  • オブジェクト指向プログラミングコンセプト

こんにちは
です。

17,938

受講生

371

受講レビュー

30

回答

4.8

講座評価

2

講座

프로필

블로그: taebbong.github.io

페이스북: facebook.com/taebbong

깃허브: github.com/TaeBbong

학력

고려대학교 정보보호학부 졸업(2020.02)

한성과학고등학교 조기 졸업(2016.02)

경력

(주) 보이저엑스 인턴, Flutter 앱/백엔드 서버 유지보수 총괄 (2019.07 ~ 2019.09)

소프트웨어 마에스트로 8기 멘티 과정 수료 (2017.08 ~ 2017.12)

유튜브 데이터 분석 스타트업 'Picasso' 공동 창업 (2017.12 ~ 2018.06)

고려대학교 정보보호학부 개발 동아리 DevKor 초대 회장 (2018.12 ~ 2020.02)

오투잡 / 위시켓 프리랜서 개발자 (2018.06 ~ )

소개

'기발자이너'를 꿈꾸는 개발자 권태뽕입니다. 중학교때부터 프로그래밍을 해왔고 이후 창업을 목표로 여러 개발과 관련된 활동을 하고 있습니다. 작년 창업을 경험해보았고 내 아이디어로 창업하는 일을 하고 싶어 그만두고 개발 공부와 강의제작에 몰두하며 지내고 있습니다.

カリキュラム

全体

13件 ∙ (1時間 25分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

172件

4.7

172件の受講レビュー

  • 강예인님의 프로필 이미지
    강예인

    受講レビュー 1

    平均評価 3.0

    3

    100% 受講後に作成

    너무 오래됨ㅁ

    • 겸식이님의 프로필 이미지
      겸식이

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      모든 개념을 파악하기보단, 먼저 따라하기로 무작정해보면 도움이 됩니다. 자세한 위젯 사용법이나 문법은 추가적으로 찾아보면서 하면 될 것 같아요.

      • Clark님의 프로필 이미지
        Clark

        受講レビュー 3

        平均評価 5.0

        5

        38% 受講後に作成

        대충 보았는데 실습하기에 아주 좋은 강의 같아보여 공부해보기로 했습니다 건강하게 군생활하시기 바랍니다

        • RyanJ.k님의 프로필 이미지
          RyanJ.k

          受講レビュー 3

          平均評価 5.0

          5

          100% 受講後に作成

          빠르게 플러터를 알 수 있어서 좋았습니다.

          • Daniel Kim님의 프로필 이미지
            Daniel Kim

            受講レビュー 3

            平均評価 4.7

            5

            100% 受講後に作成

            따라하면서 먼가 알아가는 느낌이라 좋습니다. 굳이 개념설명없이 만들어가는 과정이 깔끔하네요.

            無料

            taebbongの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!