Design

Learn Flutter and Dart

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.

Flutter

Build a cross platform app for iOS and Android

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.

Source Code

You can also view the source code for each section in the course.

Detail Notes

You can also view the detail notes for each section in the book.

Motion Design

Am fined rejoiced drawings so he elegance. Set lose dear upon had two it's what seen.

  • Flutter Introduction

    Flutter Introduction

    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.

    Requirements

    While this course is beginner friendly, it will help to have some programming experience, especially one utilizing a declarative UI. If you're coming from a SwiftUI or React/React Native background, then you should find Flutter and Dart really easy to understand.

    Here, I am running a beta of macOS Big Sur and Xcode 12, as well as Android Studio 4.0.1. Luckily, Flutter has been around for quite some time so it is not required that you use beta applications as I'm sure macOS Catalina and Xcode 11 will work just as well. We'll be using Android Studio to develop our Flutter app so I will guide you in downloading each of the above applications as well as the Flutter and Dart SDK.

    Install Xcode

    If you're on a Mac, Xcode is a great tool to have. It will give you access to the Command Line Tools that are crucial for bridging Flutter to iOS. With Xcode, you will also get access to the iOS Simulator, a handy tool to see how you Flutter app will perform. You can download Xcode from the App Store.

    Install Android Studio

    Android Studio is available for both macOS and Windows users. For Mac users, I recommend downloading Android Studio even if you have Xcode and VSCode installed. When developing with Flutter, Android Studio provides a list of handy shortcuts to speed up your workflow, access to Android Virtual Devices, and a deeper insight to your app's performance and layout.

    To install Android Studio, you can download the app from the Android Developer website at https://developer.android.com/studio. You'll see download options for your respective system, either Windows, macOS, Linux, or Chrome OS.

    When you first open Android Studio, you'll be asked to install the Android SDK along with some other plugins to help with development. You should follow the instructions Android Studio gives you as these plugins and programs will be helpful for future Android development.

    Installing the Flutter SDK

    Before starting, you'll need the Flutter and Dart SDK to create cross platform apps. To install Flutter, head over to Flutter's installation page where you can follow the instructions and download the SDK relative to your system. For Mac users, it's simpler to install using the Terminal.

     

    Open Terminal and type:

    mkdir flutter_dev
    cd flutter_dev
    git clone https://github.com/flutter/flutter.git

    This will create a new folder called flutter_dev and clone the Flutter SDK into the folder.

    Once the repository has been cloned, open the flutter_dev folder and navigate to flutter > bin. Copy the path to the bin folder.

    Heading back to Terminal, type:

    vim ~/.zshrc

    This opens an "rc" file that your Terminal uses when issuing it commands. Press "I" to go into Insert Mode, scroll all the way to the bottom, and at the end of the line, press enter a couple of times to give some space between the end of the "rc" file and the following line where you will type:

     

    export PATH=[PATH_TO_FLUTTER_SDK]/flutter/bin:$PATH

     

    Press the colon button, "wq", and the Enter to save and quite the rc file. This tells terminal where your Flutter SDK is located.

    Now, open a new window in Terminal and issue the flutter command. This should have Terminal start to download and install the Dart SDK. After the installation is complete, type flutter —version to verify that everything is working.

    Build your first Widget - Learn Flutter and Dart

    Here, 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.

    You can also view the source code for each section in the course.

    Learn the basics of programming in Dart - Learn Flutter and Dart

    Here, 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.

    You can also view the source code for each section in the course.

    Develop sidebar items with the help of classes - Learn Flutter and Dart

    Here, 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.

    You can also view the source code for each section in the course.

    Building a Full Screen Widget - Learn Flutter and Dart

    Working on the sidebar using Column, Spacer, and CircleAvatar widgets

    Here, 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.

    You can also view the source code for each section in the course.

    Building a Card Widget - Learn Flutter and Dart

    Build a beautiful UI component using layout techniques. Here, 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.

    You can also view the source code for each section in the course.

    Detecting Tap Gestures - Learn Flutter and Dart

    Make your app responsive by detecting tap gestures and tracking text entered into text fields. Here, 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.

    You can also view the source code for each section in the course.

    Stateful Widgets - Learn Flutter and Dart

    Learn to pass data between different widgets. Here, 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.

    You can also view the source code for each section in the course.

    The List View Widget - Learn Flutter and Dart

    Use the List View widget to create a new kind of scrollable UI. Here, 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.

    You can also view the source code for each section in the course.

    Animations in Flutter - Learn Flutter and Dart

    Create beautiful animations using mixins, tickers, and actions. Here, 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.

    You can also view the source code for each section in the course.

    Further Animations - Learn Flutter and Dart

    Pass data through animations. Here, 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.

    You can also view the source code for each section in the course.

    Flutter Packages - Learn Flutter and Dart

    Tap into the extensive Flutter community and add a sliding panel widget. Here, 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.

    You can also view the source code for each section in the course.

    Adding Cards to our Sliding Panel - Learn Flutter and Dart

    Next multiple widgets within one another. Here, 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.

    You can also view the source code for each section in the course.

    Creating Dynamic Widgets - Learn Flutter and Dart

    Use functions to dynamically generate widgets. Here, 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.

    You can also view the source code for each section in the course.

    Navigation in Flutter - Learn Flutter and Dart

    Transition between screens using routes and run platform specific code. Here, 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 create a platform specific UI.

    You can also view the source code for each section in the course.

    Animations with the Hero Widget - Learn Flutter and Dart

    Magically transition between views using similar elements. Here, 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.

    You can also view the source code for each section in the course.

    Building the Course Screen - Learn Flutter and Dart

    Use a scrolling view widget to display multiple lines of text. Here, 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.

    You can also view the source code for each section in the course.

    Manually Control the Panel Widget - Learn Flutter and Dart

    Display our course sections screen with the help of a sliding up panel. Here, 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.

    You can also view the source code for each section in the course.

    Creating a Vertical Scrolling List - Learn Flutter and Dart

    Build the Course Sections Screen with a List View widget. Here, 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.

    You can also view the source code for each section in the course.

    Making the Profile Screen - Learn Flutter and Dart

    Utilize Navigator to Segue to the Profile Screen in our app. Here, 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.

    You can also view the source code for each section in the course.

    Populating the Profile Screen - Learn Flutter and Dart

    Add our name, profile picture, and badges to the Profile Screen. Here, 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.

    You can also view the source code for each section in the course.

    Utilizing Widgets across Multiple Screens - Learn Flutter and Dart

    Add our custom CertificateViewer widget to the Profile Screen and modify our Continue Watching Card Widget. Here, 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.

    You can also view the source code for each section in the course.

    Setting Custom App Icons - Learn Flutter and Dart

    Learn to set the app icon for your Flutter application in both Android and iOS. Here,

    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.

    You can also view the source code for each section in the course.

    Need any help with the projects?

    Subscribe email to get news & updates

    0
    Would love your thoughts, please comment.x
    ()
    x