Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Web Development

FlutterでWebサービスを開発する(1) - Responsive Web

最高のクロスプラットフォームFlutter、 FlutterでWebを開発してください。

（5.0）受講レビュー 9件

受講生 77名

  • sailingit
실습 중심
flutter
클론코딩
크로스플랫폼
Flutter
dart
Responsive Web
AWS

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

こんなことが学べます

  • Flutter Responsive Web

  • カスタムウィジェット

  • Flutter AWS デプロイ

  • スタイル設定

  • ScrollBehavior

  • KeyboardListener

  • DropdownButton

  • Dialog

  • Beamer

FlutterでWebを開発

最高のクロスプラットフォームFlutterで、AppだけでなくWebも開発が可能です。

1つのフレームワークと言語でアプリとWebを開発してください。

lecture_thumbnail

こんな方におすすめです

Flutterを扱った人

Flutterを一度でも扱った人は難しくないように従うことができます。

App開発者

App開発者もWeb開発に興味がありますが、使用言語とフレームワークが異なるため、新たに勉強する必要がありました。さて、FlutterでアプリとレスポンシブなWebを作成しましょう

Web開発が必要なサービス

すでにFlutter Appサービスを運形している状態でWebサービスが必要な場合は、新しいフレームワークを導入することなくFlutter一つですべて消化できます。

この講義の特徴

認識の変化

Flutterでも十分にWebを開発できるという認識変化が優先です。 1つのフレームワークでAppとWebを開発できるということは、開発者としての自信向上に加えてできる領域が大幅に広がることがあります。


Web中心のFlutter講義

従来の講義は、ほとんどがApp中心の講義でした。この講義は、Web開発に焦点を当てたFlutter講義です。


低ライブラリ依存性

ほとんどのものを直接コードで記述します。そのため、ライブラリの依存性が低く、バージョン変更に柔軟です。また、直接コードを書くので、Frameworkの理解度が高くなります。


速い講義速度

川の長さを減らし、速度は急速に進んだ。

このようなことを学びます。

  • Responsive Web


    レスポンシブウェブを開発する方法を学びます。 Webで発生するさまざまな画面サイズにどのように対応すればよいかを学ぶことができます。

lecture_web

  • ウィジェットの理解
    カスタムウィジェットを大量に使用するため、ウィジェットの理解度を高めることができます。

lecture_skill_up

  • 構造設計


    Webを開発するときに必要な構造を設計する方法を学ぶことができます。

  • AWS S3 デプロイ


    AWSのS3にFlutterで作成されたウェブをデプロイできます。

  • スタイル設定


    適切なスタイル設定方法を学ぶことができます。 FrontEndでは、スタイルをどのように設定するかが常に悩みます。多くの方法の1つになることができるスタイルの設定方法を学ぶことができます。

講義を聞く方法

コードをすばやく追跡しながら講義を完了することをお勧めします。講義の呼吸が長くなったり、全体的な分量が多い場合には疲れることが多いです。だから、スピード感を維持する必要があります。全体のコースを終えた後、欠けている部分や詳細なものを勉強することをお勧めします。

もちろん注意するものはあります。速い速度を維持しますが、以下の項目に集中して講義を聞いてください。

  • 画面レイアウトの変化に応じてウィジェットを設定する方法


  • カスタムユーティリティとウィジェットがどのような役割を果たしているのか

  • 国なら、このような状況でどのように構造をとり、Class/Widget を共通化するのか

  • さらに、私が直面している問題がある場合は、これを解決する方法

受講後は

  • レスポンシブUIをどのようにするかを学ぶことができます。


  • Flutter frameworkとwidgetの理解度が高くなります。

  • FlutterでWebを開発し、AWSにデプロイすることができます。

  • 開発速度を向上させることができます。

  • 開発者1人がより多くのプラットフォームを扱うことができます。

Flutter with person

講義シリーズ

  • この講義は単発で終わるものではありません。 1人の開発者がApp、Web、Infra、Serverまですべてを扱えるカリキュラムを準備しています。

  1. Flutter Responsive Web

  2. Flutter Web SEO

  3. Flutter API with State management

  4. Dart Server

  5. Flutter Real Project with Server

  6. Flutter Framework exploration


Flutter SEOについて

多くのFlutter開発者は、Flutter WebはGoogleで検索できないことを知っています。私も以前はそう知っていました。しかし、これは間違った知識です。 Flutterで作成したWebもGoogleで検索になり、SEO最適化作業もできます。

Googleで「 Salingit 」または「 sailing-it 」を検索してください。 Flutterで作成した私の会社のホームページが検索されていることがわかります（ https://sailing-it.com/）

もちろん、これには追加の作業が必要です。そのため、SEOパッケージ（ https://pub.dev/packages/flutter_seo ）を作成してpub.devにアップロードしました。現在、講義者Flutter Responsive Webの後に私が作ったパッケージを活用して、Googleで検索できるようにSEOを適用したFlutter Web SEO講義を進行する予定です。

受講前の注意

練習環境

  • Flutter Webを開発するので、WindowsとmacOSの両方が可能です。

  • 講義では、Flutter 3.22.2、Dart 3.4.3に進んだ。これより低いバージョンでも可能です。

選手の知識と注意事項

  • 基本的なダート言語の使い方とFlutterの使用経験があれば十分です。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • Flutter初級

  • Flutter中級

  • Flutterに触れた開発者

  • FlutterでWebを開発したい開発者

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

  • Flutter

  • Dart

こんにちは
です。

77

受講生

9

受講レビュー

17

回答

5.0

講座評価

1

講座

안녕하세요

샐링잇(Sailing-it)대표 김진한입니다.

https://sailing-it.com/

 

  •  Native App 개발자로 시작해 현재 '샐링잇(sailing-it)'이라는 회사를 운영하고 있습니다.

  • 실무에서 Flutter App, Web을 사용하고 있습니다.

    시장에서 Flutter의 긍정적인 반응을 몸소 체험하고 있습니다.

  • Offline 국비지원, 기업 Flutter 강사로 활동중입니다.

  • Flutter와 Native앱 개발 블로그를 운영중입니다.
    https://jinhan38.com/

カリキュラム

全体

42件 ∙ (6時間 32分)

講座資料（こうぎしりょう）:

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

受講レビュー

全体

9件

5.0

9件の受講レビュー

  • Booin님의 프로필 이미지
    Booin

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    31% 受講後に作成

    Flutter web 개발 시도해보고싶어 수강했습니다. 티스토리 보고 강의 신청했는데 시원하게 짧게 치고 가서 진도 잘 나가네요.

    • 김진한
      知識共有者

      감사합니다. 더 좋은 강의 제공하도록 노력하겠습니다.

  • Jay님의 프로필 이미지
    Jay

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    라이브러리를 직접 만들어보는 부분이 너무 좋았습니다. 덕분에 코드에 대한 이해도도 높아지고, 직접 만들어 볼 용기도 생기네요. 다음 강의 기대됩니다!

    • 김진한
      知識共有者

      감사합니다. 더 좋은 강의 제공하도록 노력하겠습니다!

  • IT runner님의 프로필 이미지
    IT runner

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    31% 受講後に作成

    Flutter Web을 접해볼 강의가 없었는데 좋은 기회가 됐습니다. 기존에 생각하지 못한 것들을 알 수 있어서 좋았고, Flutter Web에 대한 가능성도 확인할 수 있었습니다. 강의 진행 방식도 간단 명료해서 좋았습니다.

    • 김진한
      知識共有者

      감사합니다. 더 좋은 강의 제공하도록 노력하겠습니다.

  • 바딧님의 프로필 이미지
    바딧

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    62% 受講後に作成

    • Full Stack 개발자님의 프로필 이미지
      Full Stack 개발자

      受講レビュー 2

      ∙

      平均評価 5.0

      5

      31% 受講後に作成

      ￥7,899

      似ている講座

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

      Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기강의 썸네일

      Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기

      한조각

      스프링부트, MySQL, Docker, AWS EC2, RDS 로 백엔드 서비스의 한 사이클을 완성해봅니다. 애플리케이션 배포를 통해 성취감을 얻고, API 개발시 현업에서 서버 개발자가 마주하는 문제와 그 해결법을 다룹니다.

      초급

      초급

      AWS, MySQL, Docker

      Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기강의 썸네일

      Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기

      한조각

      GSAP의 ScrollTrigger를 활용한 포트폴리오 제작강의 썸네일

      GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

      J.영

      GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!

      초급

      초급

      HTML/CSS, scrolltrigger, gsap

      GSAP의 ScrollTrigger를 활용한 포트폴리오 제작강의 썸네일

      GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

      J.영

      쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수강의 썸네일

      쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수

      LIZ.B

      쉽게 만드는 반응형 웹 실무 포트폴리오! #설화수 포트폴리오

      초급

      초급

      HTML/CSS, 반응형 웹, 클론코딩

      쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수강의 썸네일

      쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수

      LIZ.B

      Tailwind CSS로 만드는 멋진 웹 UI 스타일링강의 썸네일

      Tailwind CSS로 만드는 멋진 웹 UI 스타일링

      코딩웍스(Coding Works)

      [Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

      초급

      초급

      TailwindCSS, 반응형 웹, HTML/CSS

      Tailwind CSS로 만드는 멋진 웹 UI 스타일링강의 썸네일

      Tailwind CSS로 만드는 멋진 웹 UI 스타일링

      코딩웍스(Coding Works)

      호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)강의 썸네일

      호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)

      호돌맨

      단순히 애플리케이션 하나를 만드는데 끝나지 않습니다. Spring Boot를 활용한 백엔드부터 Vue.js 모던 프론트엔드 스택을 연동한 서비스 완성 A-Z를 보여드립니다.

      중급이상

      중급이상

      Spring Boot, JPA, AWS

      호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)강의 썸네일

      호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)

      호돌맨

      실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

      J.영

      HTML5와 CSS3를 활용하여 웹사이트(한화캐미컬/솔루션)를 제작 실습과정으로, PC 모드 레이아웃과 반응형 페이지 제작을 완벽히 이해하고, 활용할 수 있는 실전! 웹페이지 제작 ! Step by Step!의 Basic Course 강좌입니다. (강의 완성 파일 첨부!)

      초급

      초급

      HTML/CSS, 반응형 웹, jQuery

      실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

      J.영

      UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오강의 썸네일

      UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

      LIZ.B

      기획-디자인-구현 프로세스의 세번째 과정 - 반응형 웹 포트폴리오 템플릿 제작

      초급

      초급

      반응형 웹, JavaScript, jQuery

      UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오강의 썸네일

      UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

      LIZ.B

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

      영코디 킴쌤

      부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

      초급

      초급

      HTML/CSS, 반응형 웹, 인터랙티브 웹

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일

      순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

      영코디 킴쌤

      프론트 개발자를 위한 백엔드 101 (NestJS, TypeORM)강의 썸네일

      프론트 개발자를 위한 백엔드 101 (NestJS, TypeORM)

      로펀

      가장 빠르게 백엔드를 입문하게 도와주는 NestJS! 여러 실습 프로젝트를 통해 백엔드 프레임워크인 NestJS와 TypeORM, 그리고 서버 개발자라면 꼭 알아야 할 필수 이론 지식까지 속성으로 배우게 됩니다.

      초급

      초급

      NestJS, TypeORM, PostgreSQL

      프론트 개발자를 위한 백엔드 101 (NestJS, TypeORM)강의 썸네일

      프론트 개발자를 위한 백엔드 101 (NestJS, TypeORM)

      로펀

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

      영코디 킴쌤

      디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

      초급

      초급

      Bootstrap, 반응형 웹, 웹 디자인

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

      영코디 킴쌤

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

      Jiwoon Jeong

      내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

      초급

      초급

      HTML/CSS, JavaScript, REST API

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

      Jiwoon Jeong

      부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

      영코디 킴쌤

      부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

      초급

      초급

      Bootstrap, 반응형 웹, 웹 디자인

      부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

      영코디 킴쌤

      비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

      딩코딩코

      코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

      입문

      입문

      Flutter, Next.js, cursor

      비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

      딩코딩코

      인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기강의 썸네일

      인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기

      로펀

      🔥 강의 수강부터 결제, 배포까지 수강생이 겪는 전 과정을 그대로 구현해보는 실전 풀스택 강의입니다. 강의 탐색, 상세페이지, 수강신청, 영상 시청, 수강평과 질문, 장바구니 및 실결제, 이어보기, Docker + AWS 배포까지 모두 직접 만들며, 실제 서비스에 가까운 사용자 흐름과 구조 설계를 익히고 고급 풀스택 경험을 완성합니다.

      초급

      초급

      AWS, Docker, Next.js

      인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기강의 썸네일

      인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기

      로펀

      인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트강의 썸네일

      인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

      로펀

      🔥 강의 등록부터 영상 업로드까지, 지식공유자 기능을 그대로 구현해보는 실전 풀스택 강의입니다. Next.js 15와 NestJS를 활용해 강의 생성, 커리큘럼 구성, 썸네일 및 영상 업로드, 상세 소개 작성까지 실제 인프런 흐름을 따라 만들며, Prisma 모델링, JWT 인증, S3 + CloudFront 업로드, Swagger API 설계 등 실무에 가까운 경험을 쌓을 수 있습니다.

      초급

      초급

      AWS, Docker, Next.js

      인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트강의 썸네일

      인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

      로펀

      아마존 AWS 입문강의 썸네일

      아마존 AWS 입문

      Masocampus

      4차 산업혁명을 이끄는 대세, 클라우드 컴퓨팅! 아마존 AWS 입문 강의로 누구나 손쉽게 클라우드 컴퓨팅을 시작해보세요.

      초급

      초급

      AWS, WordPress

      아마존 AWS 입문강의 썸네일

      아마존 AWS 입문

      Masocampus

      기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스강의 썸네일

      기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

      볼드 UX

      기초부터 실무까지, 피그마 하나로 끝내는 UI 디자인 올인원 클래스! 오토레이아웃·컴포넌트 핵심 기능부터 반응형 디자인, 효율적 핸드오프, 협업까지 실무 스킬을 완벽 마스터합니다. 지금 시작해서 당신의 디자인 역량을 한 단계 업그레이드하세요!

      입문

      입문

      웹 디자인, 프로토타이핑, Figma

      기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스강의 썸네일

      기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

      볼드 UX