GithubHelp home page GithubHelp logo

mavericksam / flutter-for-designers Goto Github PK

View Code? Open in Web Editor NEW

This project forked from heysaik/flutter-for-designers

0.0 1.0 0.0 6.14 MB

Official Repository for the Flutter for Designers course on Design+Code

Home Page: https://designcode.io/flutter

Kotlin 0.15% Swift 0.48% Objective-C 0.05% Dart 97.97% HTML 1.35%

flutter-for-designers's Introduction

Flutter for Designers

YouTube Video About this Course: Trailer Video

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.

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.

Course Files

  1. Flutter for Designers
  2. Building your first widget
  3. Introduction to Dart
  4. Classes in Dart
  5. Building a Full Screen Widget
  6. Building a Card Widget
  7. Detecting Tap Gestures
  8. Stateful Widgets
  9. The List View Widget
  10. Animations in Flutter
  11. Further Animations
  12. Flutter Packages
  13. Adding Cards to our Sliding Panel
  14. Creating Dynamic Widgets
  15. Navigation in Flutter
  16. Animations with the Hero Widget
  17. Building the Course Screen
  18. Manually Control the Panel Widget
  19. Creating a Vertical Scrolling List
  20. Making the Profile Screen
  21. Populating the Profile Screen
  22. Utilizing Widgets across Multiple Screens
  23. Setting Custom App Icons

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.

In this course, 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 Flutter

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.

Install Xcode

If you're on a Mac, I highly recommend installing Xcode for the required Command Line Tools and for using the iOS Simulator.

Install Android Studio

For this course, I recommend installing Android Studio as we will be using it as our IDE. This is because Android Studio provides quick and easy shortcuts that can enhance your workflow when developing for Flutter. Since we are building for both iOS and Android, it will be helpful to test our app on both the iOS Simulator and the Android Virtual Device emulator.

flutter-for-designers's People

Contributors

heysaik avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.