DEV Community: Shaurya Sharma

Mastering Flutter : Setup

Shaurya Sharma — Thu, 16 Nov 2023 12:16:02 +0000

Flutter is a cross-platform app development framework. In this post, we will do a basic setup for Flutter development in Windows and macOS.

Prerequisites

Before we dive into the installation process, make sure you have the following prerequisites:

A computer
git
Google Chrome
VSCode

Installing Flutter

First, let's download and install the Flutter SDK by following these steps:

Visit the official Flutter documentation at docs.flutter.dev.
Select your operating system (Windows or macOS) from the provided options.
Follow the installation instructions until you reach the point where you are instructed to run the flutter doctor command.

Windows Setup

Once you've downloaded Flutter, ensure that your Flutter path is correctly configured. Here are the steps to set up Flutter on Windows:

Open a console window within the Flutter directory.
Run the following command:
```
flutter doctor
```
Verify that the response includes the following entries:
- [✓] Flutter
- [✓] Chrome - develop for the web
- [✓] VS Code

macOS Setup

For macOS users, it's essential to select the appropriate SDK for your Mac (Intel or Apple Silicon) during installation. Follow these additional steps after unzipping the Flutter package:

Place the Flutter directory in a preferred location, such as /your_username/Developer.
Open the Terminal and execute the following commands to add the Flutter path to your environment variables:
```
vi ~/.bash_profile
```
This will open your bash_profile in the VIM text editor. If you encounter difficulties using VIM, refer to online resources for assistance.
Press 'i' to enter insert mode, then add the following line inside your bash_profile:
```
export PATH="$PATH:/Users/your_username/Developer/flutter/bin"
```
Be sure to replace "your_username" with your actual username and adjust the path accordingly if you placed the Flutter directory elsewhere.
After adding the path variable, press the ESC key and then type Shift-z-z to save and exit.
In Terminal, run the following command to verify your setup:
```
flutter doctor
```
Ensure that the response includes the following entries:

[✓] Flutter
[✓] Chrome - develop for the web
[✓] VS Code

Platform Setup

Congratulations! You have successfully set up Flutter for web development. If you intend to develop for other platforms, you can find detailed instructions in the official Flutter documentation here.

VSCode Extensions

To enhance your Flutter development experience in VSCode, install the following extensions:

Flutter
Dart
Awesome Flutter Snippets (optional)

After installing these extensions, restart VSCode for the changes to take effect.

Running Your First Flutter Web App

Now that you have Flutter configured, it's time to create and run your first web app:

Creating a Flutter Project

You can create a Flutter project using either the terminal or VSCode:

via Terminal:

Navigate to the directory where you want to create the project and run:

flutter create project_name

via VSCode:

Open the command palette in VSCode (Mac: Cmd + Shift + P, Windows: Ctrl + Shift + P).
Search and select "Flutter: New Project."

Running the App

Once your project is created, you can run your web app as follows:

via Terminal:

Navigate to your project folder and execute the following command to launch the development server:

flutter run -d chrome

via VSCode:

Go to any Dart file in your project, click on the debug option, and run it from the top-right corner of VSCode.

Your Flutter web app will be accessible through a web browser by opening the following URL: http://localhost:5000 (note that the port may be different).

Conclusion

Congratulations! You've successfully set up Flutter for web development on both Windows and macOS. With Flutter's power and flexibility, you're now ready to create cross-platform web applications that provide exceptional user experiences. Dive into the Flutter documentation, explore different widgets, and embark on your web development journey. If you have any questions or thoughts, please share them in the comments below.

Happy Fluttering!

Flutter: Avoiding the Top Mistakes

Shaurya Sharma — Mon, 18 Sep 2023 21:55:31 +0000

Widgets and Layout

Avoid using SizedBox to artificially constrain size. Use MainAxisSize.min instead.
Avoid deeply nesting Flex widgets like Column and Row. Extract contents to separate widgets.
Extract repeating UI components into separate widgets early for better testability and reusability.
Constrain child widget size to avoid RenderFlex overflow, for example with Expanded or Flexible.
Provide layout information to widgets to avoid 'RenderBox was not laid out' errors.
Constraint scrollable widgets like ListView when placed inside Column to avoid unbounded height.
Use Expanded or SizedBox to constrain TextFormField inside Row to avoid unbounded width.
Ensure parent widget is compatible with ParentDataWidget children.
Don't call setState in build method, for example when showing Dialog, as it can lead to errors.
Use OrientationBuilder to handle UI issues when orientation changes.

Architecture and Organization

Decouple UI components from business logic by using dependency injection, for cleaner code.
Use state management solutions like Provider early on for more complex apps.
Learn basics of Android and iOS development to better understand Flutter.
Implement features yourself before using packages to better learn fundamentals.
Separate concerns following best practices for clean, maintainable code.
Use named routes for clearer navigation instead of Navigator.push().

Testing and Quality

Write tests like unit, widget, and integration tests to ensure app works as expected.
Carefully handle errors to avoid crashes. Validate input and use catchError.
Use Dart profiler to optimize performance and avoid lag and delays.
Learn about Flutter widget lifecycles to avoid issues like not disposing controllers properly.
Remember to fully restart app if bugs appear after adding a native plugin, as hot reload won't update native code.

Best Practices

Use linter package for consistent, clean code. Enforce good practices.
Extract reusable UI into widgets to optimize performance and reduce rebuilds.
Ask questions! The Flutter community is helpful and wants to see you succeed.

Flutter + Firebase: Setup

Shaurya Sharma — Thu, 14 Sep 2023 17:32:29 +0000

Flutter is a cross-platform app development framework. In this post, we will do a basic setup for Flutter development in Windows and macOS.

Prerequisites

Before we dive into the installation process, make sure you have the following prerequisites:

A computer
git
Google Chrome
VSCode (Please don’t use light mode here, please)

Installing Flutter

First, let's download and install the Flutter SDK by following these steps:

Visit the official Flutter documentation at docs.flutter.dev.
Select your operating system (Windows or macOS) from the provided options.
Follow the installation instructions until you reach the point where you are instructed to run the flutter doctor command.

Windows Setup

Once you've downloaded Flutter, ensure that your Flutter path is correctly configured. Here are the steps to set up Flutter on Windows:

Open a console window within the Flutter directory.
Run the following command:
```
flutter doctor
```
Verify that the response includes the following entries:
- [✓] Flutter
- [✓] Chrome - develop for the web
- [✓] VS Code

macOS Setup

For macOS users, it's essential to select the appropriate SDK for your Mac (Intel or Apple Silicon) during installation. Follow these additional steps after unzipping the Flutter package:

Place the Flutter directory in a preferred location, such as /your_username/Developer.
Open the Terminal and execute the following commands to add the Flutter path to your environment variables:
```
vi ~/.bash_profile
```
This will open your bash_profile in the VIM text editor. If you encounter difficulties using VIM, refer to online resources for assistance.
Press 'i' to enter insert mode, then add the following line inside your bash_profile:
```
export PATH="$PATH:/Users/your_username/Developer/flutter/bin"
```
Be sure to replace "your_username" with your actual username and adjust the path accordingly if you placed the Flutter directory elsewhere.
After adding the path variable, press the ESC key and then type Shift-z-z to save and exit.
In Terminal, run the following command to verify your setup:
```
flutter doctor
```
Ensure that the response includes the following entries:

[✓] Flutter
[✓] Chrome - develop for the web
[✓] VS Code

Platform Setup

Congratulations! You have successfully set up Flutter for web development. If you intend to develop for other platforms, you can find detailed instructions in the official Flutter documentation here.

VSCode Extensions

To enhance your Flutter development experience in VSCode, install the following extensions:

Flutter
Dart
Awesome Flutter Snippets (optional)

After installing these extensions, restart VSCode for the changes to take effect.

Running Your First Flutter Web App

Now that you have Flutter configured, it's time to create and run your first web app:

Creating a Flutter Project

You can create a Flutter project using either the terminal or VSCode:

via Terminal:

Navigate to the directory where you want to create the project and run:

flutter create project_name

via VSCode:

Open the command palette in VSCode (Mac: Cmd + Shift + P, Windows: Ctrl + Shift + P).
Search and select "Flutter: New Project."

Running the App

Once your project is created, you can run your web app as follows:

via Terminal:

Navigate to your project folder and execute the following command to launch the development server:

flutter run -d chrome

via VSCode:

Go to any Dart file in your project, click on the debug option, and run it from the top-right corner of VSCode.

Your Flutter web app will be accessible through a web browser by opening the following URL: http://localhost:5000 (note that the port may be different).

Conclusion

Happy Fluttering!

Let's go one step further and setup Firebase...

Integrating Firebase with Your Flutter App

Firebase is a powerful backend platform that provides a wide range of services to enhance your Flutter app. In this guide, we'll walk you through the steps to integrate Firebase into your Flutter app for any platform.

Prerequisites

Before diving in, ensure you have Flutter installed. Also, sign in to your Google account and access Firebase at console.firebase.google.com. If you haven't created a Firebase project yet, go ahead and create one.

Step 1: Installing the Necessary Command Line Tools

To kick things off, you'll need to install the Firebase Command Line Interface (CLI). Here's how:

a. Start by installing Node.js and npm. If you haven't already, download and install Node.js from nodejs.org.
b. Verify your Node.js and npm installations by running these commands in your terminal:
```
node -v
npm -v
```
c. Once Node.js and npm are confirmed to be installed, proceed to install the Firebase CLI globally using npm:
```
npm install -g firebase-tools
```
d. To log in to Firebase, use the following command:
```
firebase login
```
e. If the above command doesn't work as expected, try this interactive login method:
```
firebase login --interactive
```
f. Follow the prompts in your browser to select your Google account and complete the authentication.

To streamline your Flutter and Firebase integration, we'll also install the FlutterFire CLI. Execute the following command from any directory:
```
dart pub global activate flutterfire_cli
```

Step 2: Configuring Your Apps for Firebase

Use the FlutterFire CLI to configure your Flutter apps to connect with Firebase. Navigate to your Flutter project directory and run the following command to initiate the app configuration process:

flutterfire configure

The flutterfire configure workflow accomplishes the following:

Enables you to select the platforms your Flutter app supports. For each chosen platform, the FlutterFire CLI establishes a new Firebase app within your Firebase project.
You can opt to use an existing Firebase project or create a new one. If you have apps registered in an existing Firebase project, the FlutterFire CLI will attempt to match them based on your Flutter project's configuration.
Creates a Firebase configuration file (firebase_options.dart) and integrates it into your lib/ directory. This configuration file contains unique, non-secret identifiers for each platform you selected.

After initially running flutterfire configure, be sure to rerun the command whenever you:

Start supporting a new platform in your Flutter app.
Begin utilizing a new Firebase service or product, especially when employing features such as Google sign-in, Crashlytics, Performance Monitoring, or Realtime Database.

Re-running this command ensures that your Flutter app's Firebase configuration remains up-to-date and automatically incorporates any necessary Gradle plugins for Android.

Stay Informed about Flutter

To ensure you're always up-to-date with the latest developments, best practices, and in-depth instructions on integrating Flutter, we recommend following our dedicated Dev.to post.