How to create modern apps in Flutter – Flutter Part 1 - JLVtech

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.Flutter is a relatively new toolkit that makes it easy to build cross-platform apps that look gorgeous and is easy to use. By utilizing a platform's native components we'll build an app that can run on both iOS and Android that will look and feel like it was developed natively. Furthermore we'll see how with one single codebase, Flutter provides us with native performance, hot reload for fast development, and access to beautiful, native components.

Like React Native, Flutter also provides reactive-style views. Flutter takes a different approach to avoiding performance problems caused by the need for a JavaScript bridge by using a compiled programming language, namely Dart. Dart is compiled “ahead of time” (AOT) into native code for multiple platforms. This allows Flutter to communicate with the platform without going through a JavaScript bridge that does a context switch. Compiling to native code also improves app startup times.

About this Course

Much like SwiftUI and React, Flutter uses a declarative UI making it one of the best frameworks for rapid design and development. This is why this course was designed for both designers and developers. We’ll explore how to create apps for both major mobile operating systems, Android and iOS, with Flutter and its easy-to-learn Dart programming language. This course is beginner-friendly and will help you dip your toes into the ever-expanding ocean that is Flutter. We’ve packed this course with design tricks and efficient workflows to help you build great user interfaces in record time.

The design file is in Figma, project assets, and Flutter source code is shared with you so that you can compare against your own progress.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

Build your first Widget

In this section, you will learn how to build a widget from scratch in Flutter. Widgets are tiny UI components in Flutter. They are much like Views in SwiftUI. By building and combining many widgets you will be able to build an entire screen in Flutter. We'll build one row item from our sidebar.

Introduction to Dart

In this section, you will learn how the basics of the Dart programming language. We will take a look at its syntax and learn how to use data types like strings and integers. We will also look at how to perform string interpolation, how to build collections, and how to create functions.

Classes in Dart

In this section, you will learn how to create classes in Dart. Classes are important to any object oriented programming language. With the help of classes, we will build the SidebarItem class that can be used to dynamically change our sidebar item. We'll also learn about refactoring our code for easier readability and how to import and use the assets inside our Project Files folder.

Building a Full Screen Widget

In this section, we will create the rest of our sidebar. We'll take a look at a couple of new layout widgets and how to use the images and fonts we imported.

Building a Card Widget

In this section, we will create our very first card widget. We'll create a new Course class and then use a new layout widget called the Stack widget to overlay multiple widgets on top one another to create beautiful looking UI components.

Detecting Tap Gestures

In this section, we will create the navigation bar for our home page by using the widgets RawMaterialButton, TextField, Icon, and CircleAvatar. We'll also learn how the GestureDetector widget can be used to detect taps and run code when gestures are recognized.

Stateful Widgets

In this section, we will learn about stateful widgets and how we can reload the UI of our app by calling certain functions. We will progress in the development of our project by building the list to house our RecentCourseCard widgets and adding indicators whose colors will update based upon the location of the user.

The List View Widget

In this section, we will learn about the differences between a PageView widget and a ListView widget. We'll be using the second type of widget to build the "Explore" section of our app.

Animations in Flutter

In this section, we will learn how to create animations in Flutter with the help of Mixins and Tickers. We'll see how code can be run by passing functions across multiple widgets. We'll progress through our project by animating the entry of our sidebar when the button is tapped upon.

Further Animations

In this section, we will continue our journey into creating beautiful animations with Flutter. We'll see how an animation controller can manage multiple animations by dimming the content behind the sidebar screen when it is present.

Flutter Packages

In this section, we will take a look at how to add dependencies to our project by using Flutter Packages. Flutter Packages are a great way to find pre-written code and use it within your project, speeding up development. We'll use a package to build the sliding up panel in our app.

Adding Cards to our Sliding Panel

In this section, we will continue to build out the ContinueWatchingScreen widget by adding some new, custom card widgets inside a PageView widget. We'll also use stateful widgets to create the indicators for this type of widget.

Creating Dynamic Widgets

In this section, we will finish building the ContinueWatchingScreen widget by creating the "Certificates" section in this screen. We will see how we can dynamically create widgets with the help of a function and how the Transform widget can be used to modify each certificate.

Navigation in Flutter

So far, we have presented new screens in our app my either animating them into view from offscreen or by overlaying them. In this section, we will begin building the CourseScreen widget that will be presented by using actual navigation code within Flutter. We'll look at the various forms of presenting a screen in Flutter. We'll also make some modifications to our prior code and learn to creat eplatform specific UI.

Animations with the Hero Widget

So far, we have learned how to create animation in Flutter with mixins and tickers. Now, we'll see how we can create a MagicMove animation using the Hero widget. All you need to do is wrap a widget in a Hero widget and give it a unique tag. Then any other widget with a similar tag will morph into eahc other when new screens are presented.

Building the Course Screen

In this section, we'll build the content displayed below the header of the Course Screen widget. This will include some simple Text, Container, and Row widgets. However, we'll use them in unique positions to create unique looking shapes and layouts.

Manually Control the Panel Widget

In this section, we'll build the rest of the UI for our CourseScreen widget. This will include dynamically creating the indicators and creating the "View All" button. We'll also link this button to a new SlidingUpPanel widget and learn how controllers can be used to perform code that would normally be performed by a human interaction.

Creating a Vertical Scrolling List

In this section, we'll build the entire panel in our SlidingUpPanel widget. Up till now, we were only building ListView widgets that could scroll horizontally. Now, we'll see how to build a list that scrolls vertically within our panel. We'll use a function to dynamically build the cards for our list and add a footer text at the bottom

Making the Profile Screen

In this section, we'll start to build the profile screen in our app. We'll rely on navigation techniques we have learned so far and see how we can make the CircleAvatar widget responsive to taps.

Populating the Profile Screen

In this section, we'll continue to build the profile screen in our app by populating it with some of our personal information. We'll rely on widgets we have already seen to add our profile picture, name, title, and badges awarded.

Utilizing Widgets across Multiple Screens

In this section, we'll build the rest of our app by finishing the ProfileScreen widget. We'll add the "Certificates" section and the "Completed Courses" section in the profile screen.

Setting Custom App Icons

In the final section of this course, we'll take a look at how to add custom app icons for both iOS and Android and change the name of the app for each platform.