If you're new to Flutter, the first thing you should do is visit the official Flutter website and follow the instructions to install Flutter on your machine. You'll also need an IDE, such as Android Studio or Visual Studio Code, to develop Flutter applications.
After installing flutter if you want to use VS Code then also install flutter extension in VS Code.
Once you have Flutter installed and your IDE set up, you're ready to start learning!
Class ppt: Flutter_Introduction.pptx
There are many ways in which we can create a project, out of which some are listed below:
- Firstly, we will move into the directory in which we want to create a project, for eg. Documents.
cd Documents
- Now we will create the flutter project.
flutter create hello_world
- Now move into the project's directory.
cd hello_world
- Now open the project in VS Code using Ctrl+K+O.
- After installing flutter extension in VS Code, Open command pallete using the shortcut Ctrl+Shift+P. The following dialog box appears.
- Select Flutter: New Project. A new dialog Box appears.
- Select Application. After which we have to select the folder in which we have to select the folder in which we want our project.
- Now give the name of our Project hello_world.
- Let it load and your project is created.
- To run the project, in Vscode , press F5 or in terminal move into the project directory. And run the following.
flutter run
-
Select the device in which we want to run our project, here we will choose chrome i.e. we will write 2.
-
After a while it will run the project in Chrome.
-
When we have created the project the following file structure appears.
- In this, the corresponding directories correspond to that environment, i.e. android for our android app, ios for ios app, web for our web app,etc.
- We only need to add/edit code in the lib directory.
- main.dart is the current code that is running.
- main function loads our app, which calls an inbuild function runApp() where we pass the class we want to load which in our case is MyApp.
- MyApp returns a MaterialApp widget.
- This MyApp class loads the MyHomePage.
- To remove the debug tag in the app, we need to add the following code which is an attribute to the Material App at Line 14
debugShowCheckedModeBanner: false,
- To change the theme of our app, change the color blue to green at Line 26.
primarySwatch: Colors.green,
Run again(which can be done using r in terminal) and the theme changes.
- At Line 82 it uses a widget Column, changing it to Row will show both, the text and the count in a row.
child: Row(
- Try to explore more by changing style, adding attributes, etc.
- Dependencies can be added to our flutter project in pubspect.yaml file in the root directory which can be added after Line 31 .
- To add a directory select the dependency from pub.dev and run the follwoing code in terminal to load the dependecy.
flutter pub get