romanejaquez / flutterweb-codelab1

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flutter Web Codelab (pt. 1) - Introduction to Flutter Web

Overview

Welcome to the exciting world of Flutter Web!

Flutter is an open-source UI Toolkit supported by Google for building beautiful, natively-compiled user interfaces in a multi-platform fashion, using Dart, another open-source programming language supported by Google, as its language.

Flutter for Web provides the lowest barrier to entry when it comes to becoming a profilic Flutter developer. Most of the concepts learned in Flutter can be applied in a multi-platform scenario, and web is not an exception, so join us in building compelling web apps by going through the codelabs in this series.

NOTE: THIS IS NOT A BEGINNER CODELAB

(If you're looking for more beginner content, please visit some of my other codelabs here). If you're up for the challenge, then proceed.

This is a codelab series focused on Flutter Web, in which you'll learn the following:

  • Building Layouts in Flutter
  • Adding Custom Fonts
  • Page Navigation
  • Nested Navigation
  • Responsive Design
  • State Management using Provider
  • Persisting state in Local Storage
  • Theming your Web Apps

The following screenshot depicts what we'll be building throughout this series:

  • A Flutter Web App for your own Personal Portfolio
  • Shows a brief profile information
  • Contains pages for the major social media platforms and professional content portals (Twitter, LinkedIn, Github) and for showcasing your web presence
  • Contains a light and a dark theme
  • Contains a custom side navigation rail (on tablet and desktop) and an expandable menu for mobile
  • Adjusts to the size of the screen in which it renders using responsive design
  • Stores the last selected option

App

Full Code - still in progress.

Please don't forget to follow me on social media:

About


Languages

Language:HTML 100.0%