Flutter First App:
Creating First Flutter App:
We will create Flutter App in three different ways by using following ways given below :
- Android Studio
- VSCode
- Terminal and Editor
Creating flutter App Using Android Studio:
Open Android Studio as Administrator in windows and the follow the steps below:
- Select File > New Flutter Project (here it shoes Android project and Flutter project)
- Select Flutter application as the project type, and press Next
- Enter a project name (e.g.
myfirstflutterapp), and press Next - Click Finish
After selecting finish wait for a while for Android Studio to install the SDK, and create the project
along with a Flutter project directory called “myfirstflutterapp” that contains a simple demo app and uses Material Components.
In the project directory, the code for your app is in lib/main.dart. In this directory, we are writing the dart code for the app.
Run the Flutter app In Android Studio:
- Find the main Android Studio toolbar at the top in Android Studio:
By using target selector, we selects an Android device for running the app. In target selector it shows the configured devices only. If you don’t configured then it will be empty.If it is empty then configure the Emulator using AVD Manager. I have Explained in my previous tutorial to configure emulator device. If you want to know how to configure emulator Click Here
Click the Run icon in the toolbar, or invoke the menu item Run > Run. When Run window opens it shows Configured Emulator and select it and then select RUN to run the application.
If everything works fine , you will see the following app output on your device or simulator (here simulator used for IOS and Emulator for Android):
Flutter hot reload:
Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state means we will make changes while running the app means no need to close the. Simply make a change to your source code, Inform the changes to the IDE or command-line tool that we want to hot reload, and that reflects the change in your simulator, emulator, or device.
- Change the string:
‘You have pushed the button this many times:’to
‘You have clicked the button this many times:’
- No need to press ‘Stop’ button; let your app continue to run.
- To see your changes in your app invoke Save All, or click Hot Reload(the bolt icon button).
You should see the updated string in the running app almost immediately within a fraction of second.
Creating Flutter App Using VS Code:
VS Code: A light-weight editor which supports Flutter run and debug support.
Follow the below steps to create Flutter project using VSCode:
- Start VS Code
- Go to View > Command Palette
- Type “flutter”, and select the Flutter: New Projectaction
- Enter a project name (Example: “
myfirstflutterapp“), and press Enter - Create or select the parent directory for the new project folder
- Wait for project creation to complete by VSCode and When project create the dartfile to appear or created by VSCode.
The above steps creates a Flutter project directory called “myfirstflutterapp” that contains a simple demo app and uses Material Components.
In the project directory, the source code for your app lies in lib/main.dart. This file contains your apps source code that you are writing.
Run the app:
- Find the VS Code status bar (the blue bar at the bottom)
- Select a device from the Device Selector area.
If no device is available and you’d like to use a device simulator, click No Devices and launch a simulator.
- To setup a real device, follow the device-specific instructions.
- Go to Debug > Start Debugging or press F5.
- Wait for the app to launch — progress is printed in the Debug Console view
- If everything works, after the app has been built, you’ll see the starter app on your device:
Flutter hot reload:
Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state means we will make changes while running the app means no need to close the. Simply make a change to your source code, Inform the changes to the IDE or command-line tool that we want to hot reload, and that reflects the change in your simulator, emulator, or device.
- Change the string
‘You have pushed the button this many times:’ to
‘You have clicked the button this many times:’
2.No need to press ‘Stop’ button; let your app continue to run.
3.To see your changes in your app go to file> Save All, or click Hot Reload (the green rounded arrow button).
You should see the updated string in the running app almost immediately within a fraction of second.
Create Flutter App Using Terminal + editor:
Terminal + editor: Your editor-of-choice combined with Flutter’s terminal tool for running and building.
Create new Flutter app/ Project Using Terminal + Editor:
- Use this command flutter create to create a new project (new Flutter project):
$ flutter create "myfirstflutterapp"
$ cd "myfirstflutterapp"
The above command creates a Flutter project directory called “myfirstflutterapp” that contains a simple demo app that uses Material Components.
In project directory, the code for your app is lies in this folder lib/main.dart. This folder contains all the source code for Flutter app that we are writing.
Run the Flutter app Using Terminal + Editor:
- Use below command to Check an available Android devices for running the app.
- flutter devices
- Use the below command to run the flutter App
$ flutter run
- If everything works fine , after the app has been built, you’ll see the starter app on your device and the below output:
Flutter hot reload:
Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state means we will make changes while running the app means no need to close the. Simply make a change to your source code, Inform the changes to the IDE or command-line tool that we want to hot reload, and that reflects the change in your simulator, emulator, or device.
- Change the string
‘You have pushed the button this many times:’ to
‘You have clicked the button this many times:’
- No need to press ‘Stop’ button; let your app continue to run.
- To see your changes in your app invoke Save All (
cmd-s / ctrl - s), or click Hot Reload(the bolt icon button).
You should see the updated string in the running app almost immediately within a fraction of second.
______________________________________________________________
Creating First Flutter App:
Create Simple flutter App by following one of the above three methods:
When the app is created with the you entered name then automatically it create lib/main.dart directory folder. this folder contains code inside it please replace all the code inside it. and add the following given code inside it and save.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
Tip: When we paste code into your app, indentation can become exist but we can fix it automatically with the help of Flutter tools:
- If you are using Android Studio / IntelliJ IDEA: then Right-click on the code and select Reformat Code with dartfmt.
- if you are using VS Code: then Right-click on the code and select Format Document.
- If you are using Terminal: then Run flutter format <filename>.
The above example code creates a Material App is a visual design and it is standard used for Mobiles Applications development. Flutter offers a no of Material design widgets to design beautiful UI’s .
In above code we used fat arrow ” => ” notation are symbol for one line Methods or Functions.
- The app extends StatelessWidget In Flutter, almost everything is a widget, The app itself acts as a widget. which
- includes alignment, padding, and layout etc.
In above code we used Scaffold widget, used from the Material library.it provides default app bar, title and a body properties for the home screen. It provides sub tree for widgets that will be somewhat complex for coding and reading.
The main purpose of widget is to provide a build() method. then the build() method describes how to display this widget with respect to other low level widgets.
In code we used two widgets one is Center widget and other one is a Text it is a child widget. Here the center widget aligns its child widget i.e text widget into the center of the screen.
After fixing indentation using one of above three methods save the code and run the app using one of above three methods
When we run the application for the first time it takes time to load. for the second time it uses hot reload for quick loading and also reflects updates quickly if we update anything. During app running SAVE method also performs hot reload.
______________________________________________________________________________
Commands
Adding Key Bindings for Commands
Dart: Change SDK
Dart: Organize Imports
Dart: Go to Super Method
Dart: Show Type Hierarchy
Dart: Sort Members
Pub: Get Packages
Pub: Upgrade Packages
Flutter: New Project
Flutter: Run Flutter Doctor
Flutter: Change Device
Flutter: Change SDK
Flutter: Get Packages
Flutter: Upgrade Packages
Adding Key Bindings for Commands:
Key Bindings:
For Flutter in VSCode Many of the key bindings we use for Dart Code come from VS Code itself. Below is a list of shortcuts that were added by Dart Code or from VS Code that may find useful for Dart and Flutter development.
We will configure our own key bindings, including binding to commands provided by Dart Code by running this command Preferences: Open Keyboard Shortcuts from the command palette
Below is a List of some Editor Key Bindings that are helpful for Flutter:
- Ctrl+T (macOS: Cmd+T) – Show Workspace Symbols
- Ctrl+Shift+O (macOS: Cmd+Shift+O) – Show Document Symbols
- Ctrl+Shift+P (macOS: Cmd+Shift+P) – Open Command Palette
- Ctrl+Space – Open Code Completion
- Ctrl+. (macOS: Cmd+.) – Open Quick Fixes
- F2 – Rename Symbol
- Shift+Alt+F (macOS: Cmd+Shift+F) – Format Document
- F12 – Go To Definition
- Shift+F12 – Find References
- Alt+Shift+O – Organize Directives
- F4 – Show Type Hierarchy
Debug Key Bindings:
- F5 – Start Debugging
- Ctrl+F5 – Start Without Debugging
- Shift+F5 – Stop Debugging
- Ctrl+Shift+F5 (macOS: Cmd+Shift+F5) – Restart Debugging (Hot Reload when debugging Flutter apps)
- Ctrl+F5 – Hot Restart (when debugging Flutter apps and in a debug session)
- F9 – Toggle Breakpoint
- F10 – Step Over
- F11 – Step In
- Shift+F11 – Step Out
Dart: Change SDK
the command dart.sdkPaths will allow you to quickly switch between Dart SDKs. If settings are configured
Dart: Organize Imports
This command removes unused imports and sorts directives in the current Dart file.
Dart: Go to Super Method
This command goes to the super implementation of the method under the caret.
Dart: Show Type Hierarchy
This commands display the hierarchy for the current types in a pickup list.
Dart: Sort Members
This command is used to sort all of the directives, unit and class members in the current Dart file.
Pub: Get Packages
This command fetches Pub packages listed in your pubspec.yaml and its dependencies for the current project. If it is called or invoked in a Flutter project. Instead of using this Flutter: Get Packages.
Pub: Upgrade Packages
This command upgrades Pub packages to the latest version allowed by the constraints in
your pubspec.yaml for the current project. If invoked in a Flutter project or running this command also Flutter:
Upgrade Packages.
.
Flutter: New Project
To create a new project in VSCode we are using this command. by this command it also asks for new project name means name of the project and also name of the folder to be create while creating the new flutter project. The folder will be created and opened automatically and all required files created automatically. A notification will appear once the creation process is complete and your project is ready to run.
Flutter: Run Flutter Doctor
This commands runs flutter doctor and shows the results in the Output pane.
Flutter: Change Device
Using this command we are switching between multiple devices or simulators connected to quickly switch between Dart SDKs.
Flutter: Change SDK
If we configures the path settings then this command dart.flutterSdkPaths allow you to quick switch between Flutter.
Flutter: Get Packages
This command used to fetch the Flutter packages listed in your pubspec.yaml and its dependencies for the current project. If invoked in a standard Dart project this command will instead run Pub: Get Packages.
Flutter: Upgrade Packages
This command used for upgrading Flutter packages to the latest version allowed by the constraints in your pubspec.yaml for the current project. By invoking in a standard Dart project and also run this command Pub: Upgrade Packages.
____________________________________________________________________________
Quickly Switching Between Flutter Devices:
If you have more than one devices or more simulators connected then we have many ways to quickly switch between them:
- By clicking on the currently selected device in the status bar of VSCode editor
- By Executing this Command Flutter: Change Device
- By using CUSTOM KEY BINDING commands to change the device for the Flutter if there are multiple devices available: Change Device
You will be presented with a pick list of all devices and simulators to select from:
Selecting a new device will apply from the next debugging session.