How to Setup Flutter Web With GitHub Pages [3 Step Tutorial] - #2 Flutter Web Tutorial Series By Florian Prümer

Summary by www.lecturesummary.com: How to Setup Flutter Web With GitHub Pages [3 Step Tutorial] - #2 Flutter Web Tutorial Series By Florian Prümer

Setting up a Flutter Web Project with GitHub Pages

Introduction

In this video, the instructor walks through the process of setting up a Flutter web project and deploying it to GitHub Pages. The video is divided into three main parts:

1. Creating a Flutter project in Android Studio with web support enabled.

2. Setting up a local Git environment.

3. Deploying the Flutter website to GitHub Pages.

(00:00 - 00:13)

• The instructor is starting a new series on Flutter web development

• They will be discussing why Flutter web is their preferred choice for creating a developer portfolio

(00:11 - 00:23)

• In this video, the instructor will show how to properly set up a Flutter web project and deploy it to GitHub Pages

• The video will be divided into three parts

(00:21 - 00:34)

• Part 1: Create a Flutter project in Android Studio with web support enabled

• Part 2: Set up a local Git environment

• Part 3: Deploy the Flutter website to GitHub Pages

(00:32 - 00:44)

• If anything is unclear, the instructor encourages viewers to post their questions in the comments

• The instructor has provided some reference links in the description that helped them and served as a foundation for the steps in this video

(00:42 - 00:55)

• The instructor will begin by creating a new Flutter project in Android Studio

• This can also be done via the command prompt, but the instructor prefers to do it in Android Studio

(00:53 - 01:06)

• Give the project whatever name you like

• Specify the path to your Flutter SDK and the path where you want to store the project

• Click through the remaining points to create the project

(01:04 - 01:16)

• The project is now set up as a normal Flutter project

• To enable web support, go to the terminal and run flutter create .

(01:18 - 01:34)

• The web

  folder will now appear, but these are not the files we will be using to deploy the website

• To get the files we want, run flutter build web

  in the terminal

(01:31 - 01:44)

• The build

  folder now contains all the necessary files for deployment

• These are the files we want to include in our GitHub repository to be used by GitHub Pages

(01:42 - 01:56)

• The next step is to prepare a GitHub repository for the project

• Go to your GitHub account and create a new repository

(01:54 - 02:08)

• Give the repository a name, set it to public or private, and optionally add a README, .gitignore, and license

(02:06 - 02:18)

• The repository is now created, and we need to link our local project folder to the online GitHub repository

• There are many ways to do this, but the instructor prefers to use Git Bash

(02:17 - 02:32)

• In the build/web

  folder, initialize a local Git repository with git init

• Add all the files with git add *

  and commit them with git commit -m "First commit"

(02:30 - 02:43)

• Rename the master

  branch to main

  with git branch -M main

• Connect the local repository to the GitHub repository with git remote add origin <repository-url>

(02:40 - 02:51)

• Now, every time you build your website with flutter build web

  , you can push the newly created web files to the GitHub repository

(02:50 - 03:05)

• The final step is to enable GitHub Pages for the repository

• Go to the repository settings, navigate to the "Pages" section, and select the main

  branch as the source

(03:00 - 03:14)

• After a short while, the website should be published and accessible at the provided URL

(03:11 - 03:28)

• However, the instructor encountered an issue where resources could not be loaded

• This was due to a missing reference in the index.html

  file's base

  tag

(03:24 - 03:39)

• To fix this, copy the URL provided in the GitHub Pages settings and paste it into the base

  tag of the index.html

  file

(03:37 - 03:51)

• After publishing this change, the website should now be accessible and working correctly

(03:49 - 04:03)

• The instructor concludes by stating that these three steps are one way to set up a Flutter web project and deploy it to GitHub Pages

• There may be other, potentially better, ways to achieve the same goal

(04:01 - 04:14)

• The instructor encourages viewers to share their alternative or improved methods, so everyone can benefit from the experience

(04:11 - 04:24)

• The instructor wishes the viewers a nice day and looks forward to the next video in the Flutter web tutorial series

Key Takeaways

• Creating a Flutter Web Project:

  • Create a new Flutter project in Android Studio or via the command prompt

  • Enable web support by running flutter create .

    in the terminal

  • Build the web files using flutter build web

• Setting up a Local Git Environment:

  • Initialize a local Git repository in the build/web

    folder

  • Add and commit all the files

  • Rename the master

    branch to main

  • Connect the local repository to a new GitHub repository

• Deploying to GitHub Pages:

  • Enable GitHub Pages for the repository in the repository settings

  • Copy the provided URL and update the base

    tag in the index.html

    file

  • Publish the changes, and the website should be accessible

• Troubleshooting:

  • If you encounter issues with resources not loading, check the base

    tag in the index.html

    file and update it with the correct URL

• Additional Considerations:

  • There are multiple ways to set up a Flutter web project and deploy it to GitHub Pages

  • The instructor encourages viewers to share their alternative or improved methods

Footnotes

[^1]: The instructor has provided some reference links in the description that helped them and served as a foundation for the steps in this video.

DeepLearn by www.lecturesummary.com: How to Setup Flutter Web With GitHub Pages [3 Step Tutorial] - #2 Flutter Web Tutorial Series By Florian Prümer

Responsive Top Navigation Bar in Flutter Web

Introduction (00:00:00 - 00:00:13)

• Greetings everyone, welcome to the third episode of the Flutter web tutorial series

• Today, we will be looking at how to program a responsive top navigation bar for a Flutter web project

Setting up a Flutter Web Project (00:00:13 - 00:00:29)

• This tutorial will show the basics of creating a responsive layout for a Flutter website

• Assumes you have already set up a Flutter web project properly

• If you haven't, check out the previous video covering how to set up a Flutter web project and deploy your website for free

Desktop vs Mobile Views (00:00:29 - 00:00:55)

• The design will have two different views:

  • Desktop view: with a tapper and different content

  • Mobile view: with a hamburger menu

• The views will switch depending on the size of the window

Implementing the Structure (00:00:55 - 00:01:28)

"Let's start by implementing this structure first. Let's remove all that demo code and replace it with our own home page."

• Create a new Stateful Widget file

• Set up the Stateful Widget properly

• Add it to the main.dart

  file

• Use a LayoutBuilder

  widget in the Scaffold

  to handle the different views

Showing Desktop vs Mobile View (00:01:28 - 00:02:00)

• The LayoutBuilder

  widget will determine what to show based on the size of the window

• If the maximum width is greater than 715, show the desktop view

• Otherwise, show the mobile view

• Create the missing widget functions for the desktop and mobile views

Connecting Tabs and Content (00:02:00 - 00:02:33)

• The tab items and their corresponding content are closely connected

• This is why we want to have some structure to handle both the tabs and the content

Video Timestamp	Notes
(00:00:00 - 00:00:13)	- Greetings, welcome to the third episode of the Flutter web tutorial series - Today, we'll be looking at how to program a responsive top navigation bar for a Flutter web project
(00:00:13 - 00:00:29)	- This tutorial will show the basics of creating a responsive layout for a Flutter website - Assumes you have already set up a Flutter web project properly - If you haven't, check out the previous video covering how to set up a Flutter web project and deploy your website for free
(00:00:29 - 00:00:55)	- The design will have two different views: - Desktop view: with a tapper and different content - Mobile view: with a hamburger menu - The views will switch depending on the size of the window
(00:00:55 - 00:01:28)	- Start by implementing the structure - Remove the demo code and replace it with your own home page - Create a new Stateful Widget file - Set up the Stateful Widget properly - Add it to the main.dart file - Use a LayoutBuilder widget in the Scaffold to handle the different views
(00:01:28 - 00:02:00)	- The LayoutBuilder widget will determine what to show based on the size of the window - If the maximum width is greater than 715, show the desktop view - Otherwise, show the mobile view - Create the missing widget functions for the desktop and mobile views
(00:02:00 - 00:02:33)	- The tab items and their corresponding content are closely connected - This is why we want to have some structure to handle both the tabs and the content

Organizing Code with Classes

(00:02:33 - 00:02:46)Description:This section discusses how using classes can make our code much cleaner, easier to read, and easier to maintain. The instructor has prepared a class that takes in two parameters: a custom tab and content (any widget).

Key Points:

• Classes make the code more organized and maintainable

• The class takes in a custom tab and content (any widget) as parameters

Creating a Custom Tab Widget

(00:02:46 - 00:03:04)Description:The instructor has created a custom tab widget that can be used in the application. This widget is separate from the content view class, allowing for more flexibility in styling and interaction.

Key Points:

• A custom tab widget has been created

• The tab widget takes in a title as a string and displays it as text

Designing the Home Page

(00:03:19 - 00:03:51)Description:The instructor is now setting up the home page of the application, which will display a list of three items: the home tab, the about page, and the projects page. For now, the content for these pages will be placeholder content.

Key Points:

• The home page will display a list of 3 items:

  • Home tab

  • About page

  • Projects page

• The content for these pages will be placeholder content for now

Implementing the Desktop View

(00:04:16 - 00:05:32)Description:The desktop view of the application will consist of a column layout with two elements: the custom tab bar and the content. The instructor will be creating the custom tab bar, which will take in a tab controller and a list of tabs as parameters.

Key Points:

• The desktop view has a column layout with two elements:

  • Custom tab bar

  • Content

• The custom tab bar will be created as a stateless widget

• The custom tab bar will take in a tab controller and a list of tabs as parameters

Constructing the Custom Tab Bar

(00:05:32 - 00:05:59)Description:The instructor is now building the custom tab bar. They will add a container that is as wide as a quarter of the screen, and then add a tab bar widget that uses the controller and tabs from the previous step.

Key Points:

• The custom tab bar will have a container that is a quarter of the screen width

• The tab bar widget will be added to the container, using the tab controller and tabs from the previous step

Creating a Tab Controller and Implementing a Tapper

Creating a Tab Controller

(00:05:59 - 00:06:24)

• To create a tab controller, we need to initialize it in our initState()

  method.

• The tab controller takes in the length of our content view list as a parameter.

Implementing a Tapper

(00:06:24 - 00:06:41)

• To solve the V sync

  error, we need to add the SingleTickerProviderStateMixin

  to our class.

• Once we've done that, we can add the controller to our tapper.

Accessing Tabs and Content Views

(00:06:41 - 00:07:20)

• We can get our tabs from the previously created content view list.

• For each content view, there is a tab and a content.

• To get a list of all the tabs, we can use the map()

  method on the contentViews

  list.

• This allows us to iterate over all elements in the list and select each tab.

Implementing the Desktop View

(00:07:20 - 00:08:21)

• Similar to the tapper, we now need to access every content widget in our list.

• First, we add a Container

  with a random height and a TapperView

  as a child.

• We then use the map()

  method on the contentViews

  list to access all the content elements.

• Our desktop view is now roughly implemented, but it still doesn't look nice and isn't fully responsive.

Improving the Desktop View

(00:08:21 - 00:09:14)

• To make the desktop view responsive, we need to give our TapperView

  a responsive size to prevent overflow.

• We can do this by adding a screen height value and a responsive value based on the current screen size in our build()

  method.

• We can also give our TapperView

  a height of 85% of the current screen height.

• Finally, we can add some padding to the top and bottom of our page, calculating the values with a scaling factor in our build()

  method.

Implementing the Tapper

(00:09:14 - 00:09:40)

• The next step is to implement the tapper.

Responsive Tapper Design

Rescaling Tapper Width

(00:09:40 - 00:09:52)

• We want to avoid line breaks in our tapper

• We will rescale the width of our tapper depending on the size of our window

Introducing Screen Width

(00:09:52 - 00:10:06)

• We will introduce the screen width to our custom tapper

• Depending on the width, we will have a scaling value

Scaling Values

(00:10:06 - 00:10:16)

• If the screen width is greater than 1400, the scaling value is 0.21

• If the screen width is between 411 and 1400, the scaling value is 0.3

• If the screen width is smaller than 411, the scaling value is 0.4

• The smaller the screen width, the wider the tapper becomes

Applying Scaling

(00:10:32 - 00:10:52)

• By multiplying the screen width with the scaling value, we can avoid any line breaks affecting our tapper titles

Tapper Styling

(00:10:52 - 00:11:03)

• We will wrap our tapper with a theme

• Add theme data to set the highlight color, splash color, and hover color to transparent

Additional Styling

(00:11:03 - 00:11:16)

• Add an indicator color and some padding to the tapper

Customization

(00:11:16 - 00:11:40)

• The styling choices are just a preference, feel free to add any style you want

Desktop View

(00:11:40 - 00:11:55)

• The desktop view is looking good and scaling properly based on the window size

Mobile View

(00:11:55 - 00:12:33)

• We want to add a mobile view with a hamburger menu that opens a drawer with the tapper items

Hamburger Menu

(00:12:33 - 00:13:09)

• Add a container as wide as the screen

• Add a column with alignment

• Add a white icon button with a hamburger icon and an unpressed method

Drawer

(00:13:09 - 00:13:51)

• We need to define the drawer that opens when the hamburger icon is clicked

• Create a custom widget function where we add a drawer widget with the tapper items as the child

Working with the Map Method and Adding a Drawer

Map Method and List Addition

(00:13:51 - 00:14:06)

• We are working with the map()

  method again

• We will add a new list at the end of our code

Preparing the Drawer and Icon Button

(00:14:06 - 00:14:54)

• Both the icon button and the drawer are ready to be implemented

• The drawer will be added to the right side of the screen

Implementing the Drawer

(00:14:54 - 00:15:18)

• Since the hamburger icon is aligned to the right, the drawer should also come from the right

• We will use an EndDrawer

  instead of a normal Drawer

  to achieve this

Scaffold Key and Opening the Drawer

(00:15:18 - 00:16:00)

• We need to define a scaffoldKey

  and add it to our Scaffold

• This will allow us to call the openEndDrawer()

  method on the scaffoldKey

  to open the drawer

Responsive Design Adjustments

(00:16:00 - 00:16:25)

• We will add some side padding to our view

• We will also adjust the size of the icon button based on the screen size

Drawer Appearance

(00:16:25 - 00:16:52)

• We will add an empty container to the drawer to make it look nicer

Conclusion

(00:16:52 - 00:17:22)

• Our fully responsive top navigation bar in Flutter is now complete

• We have learned some neat tips and tricks along the way

Upcoming Videos

(00:17:22 - 00:17:35)

• Stay tuned for upcoming videos in the Flutter web tutorial series

• New episodes will be uploaded every Friday

If you have any questions, feel free to ask them in the comments.