DEV Community

Cover image for 28 Days of Flutter Bootcamp šŸ•ā€“ Day 1: Introduction and development setup
Suchitkumar Khunt
Suchitkumar Khunt

Posted on • Edited on

28 Days of Flutter Bootcamp šŸ•ā€“ Day 1: Introduction and development setup

Welcome to the Flutter Bootcamp. This is the fully flutter course for a complete guide to the Flutter SDK and flutter framework with DARK for building a beautiful native Android and iOS application. I am covering all fundamental concepts for flutter development; this becomes the most comprehensive free flutter course.

What you will learn?

  • The fundamentals of building apps with Flutter and Dart
  • Build beautiful, engaging native and fast apps for Android and iOS with one codebase
  • Learn the advanced UI with premade flutter widgets and third-party SDK
  • Dart programming with the concept of OOPS fundamentals
  • All widgets explanation with rich text articles and speed code video
  • Create a fully functional app with firebase authentication, firestore and fire storage [with speed code video]
  • Advanced features like push notification, google map, device camera, touch authentication and many more
  • Deep dive in Crashlytics, Admob, Performance, A/B testing and Remote config

What you will need?

  • A computer system with admin privileges
  • We will use Android studio as a development tool [it is free to use]
  • Git, Flutter SDK and Dart SDK
  • Have at least 20GB of free space on your hard drive
  • This course starts with a very basic level, so no prior programming language experience required

What is Flutter?

Flutter is Googleā€™s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktopfrom a single codebase. In this course, you will learn about mobile development.

Why I choose Flutter for mobile development?

Fast Development

Resource Credits: https://flutter.dev

  • Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully customizable widgets to build native interfaces in minutes.

  • Flutterā€™s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times without losing state on emulators, simulators, and hardware.

Expressive and Flexible UI

Resource Credits: https://flutter.dev

  • Quickly ship features with a focus on native end-user experiences. The layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.

  • Delight your users with Flutterā€™s built-in beautiful Material Design and Cupertino (iOS-flavour) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.

Native Performance

Resource Credits: https://flutter.dev

  • Flutterā€™s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dartā€™s native compilers.

Step by Step walk-throughs

Flutter Development setup for Windows

A. Install Git:

Suchit Khunt

  • Install the downloaded Git setup

Suchit Khunt

Suchit Khunt

Suchit Khunt

B. Ready to start with Flutter SDK:

  • Download the latest stable release Flutter SDK from https://flutter.dev/docs/get-started/install/windows

  • Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges)

Suchit Khunt

  • Update your path (If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable)

1) From the Start search bar, enter ā€˜envā€™ and select Edit the system environment variables for your account.

Suchit Khunt

2) In the Advanced tab click on ā€œEnvironment Variablesā€¦ā€

Suchit Khunt

3) Under User variables check if there is an entry called Path: (select the Path entry and click on Edit)

Suchit Khunt

4) If ā€œC:\src\flutter\binā€ does not exist, then click on Newand add ā€œC:\src\flutter\binā€

Suchit Khunt

5) To check the path variable setup open the command prompt and run ā€œflutter ā€” versionā€

Suchit Khunt

C. Get started with Dark SDK:

Suchit Khunt

  • Extract the zip file and place the contained dart-sdk in the desired installation location for the Flutter SDK (for example, C:\Program Files\Dart\dart-SDK)

  • Update your path

1) From the Start search bar, enter ā€˜envā€™ and select Edit environment variables for your account.

2) In the Advanced tab click on ā€œEnvironment Variablesā€¦ā€

3) Under System variables check if there is not an entry called DARK_SDK; click on Newā€¦

Suchit Khunt

4) Enter ā€œDART_SDKā€ in Variable name and ā€œC:\Program Files\Dart\dart-sdkā€ in Variable value then click on OK

Suchit Khunt

5) To check the path variable setup open the command prompt and run ā€œflutter ā€” versionā€

Suchit Khunt

D. Install the Android Studio tools:

Suchit Khunt

E. Finish the installation by running the command flutter doctor:

  • From a console window run the command ā€œflutter doctorā€ to see if there are any platform dependencies you need to complete the setup:

Suchit Khunt

Note: You may warning message ā€œ! Doctor found issues in 1 categoryā€ for ā€œconnected deviceā€. Ignore it at this point as we have not set up any physical device or emulator.

Note: To set up the Flutter development on MAC, follow the step describe in https://flutter.dev/docs/get-started/install/macos. As I donā€™t have MAC so unable to describe the steps in details but you can follow the step as per the above link to complete the setup on MAC.


NEXT: Creating a new flutter project and setup physical device and emulator.

Top comments (4)

Collapse
 
ankitkanojia profile image
Ankit Kanojia

Great explained. I've tried it and perfectly worked as mentioned. Thank you so much @khuntsr

Collapse
 
green93825907 profile image
Green

So where's the rest of the tutorial?

Collapse
 
sagar98cyber profile image
Sagar Shah

github.com/sagar98cyber/dummy_trai....

I am having an issue with admob-flutter ads, can you help me out here?

Collapse
 
rezadewantara profile image
rezadewantara

thank's