Scribd
Upload
8 views12 pages

Creating First App

The document provides a guide for installing the Flutter SDK and setting up the development environment, including adding the SDK path to environment variables and installing necessary extensions in Visual Studio Code. It outlines the process for creating a Flutter application, including naming conventions and the structure of the main application code. Additionally, it explains the organization of project directories and the roles of various components within a Flutter app.

Uploaded by

sultanimay599
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views12 pages

Creating First App

The document provides a guide for installing the Flutter SDK and setting up the development environment, including adding the SDK path to environment variables and installing necessary extensions in Visual Studio Code. It outlines the process for creating a Flutter application, including naming conventions and the structure of the main application code. Additionally, it explains the organization of project directories and the roles of various components within a Flutter app.

Uploaded by

sultanimay599
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Creating First App

CST 05206
Installing Flutter sdk

• What is sdk?
• SDK stands for Software Development Kit.
• It's a collection of tools, libraries, and documentation that help developers
build applications for a specific platform or operating system.
• Think of it as a toolbox with pre-built components and instructions to
simplify the development process
• Download flutter sdk from
(https://docs.flutter.dev/get-started/install/windows)
• Choose a folder, extract the package in the location
• Navigate to bin folder and copy the link.
• Add the link to the environment variable
Adding path to environment variable

• In search bar, type


envir, a dialogue
box with system
properties will
appear (1st
picture)
• Click on
environment
variable (2nd
Diologue box
appears)
• Select path then
Edit
Adding path to environment variable
• Navigate to flutter bin folder
and copy the path and paste
in the new path as seen in
the picture
Flutter environment

• Open Powershell/Command Line


• Run flutter command
• Flutter>flutter
Flutter environment

• Run flutter doctor

• Flutter doctor: Diagnoses the developer's computer to


ensure we've installed Flutter and it is ready to use.
• We can run Flutter Doctor anytime we update or change
our system configuration to ensure Flutter continues to be
set up correctly
Visual studio Code

• Open Visual Studio Code editor and download


and install flutter extension.
• Click on extensions icon, and search on
extension panel flutter.
• Install the first option which also installs dart
• This make sure flutter and dart is recognized
while using the editor making it easy to
identify errors and debug.
First Application
• To create an app run
the flutter create
command
• Before running the
command navigate to
where you want your
project to be stored.
• E.g. flutter create
(nameofthe
application)
First Application

Rules for naming Application


• Lowercase with Underscores:
• Use lowercase letters and separate words with underscores
(e.g., my_app, flutter_project).
• Valid Dart Identifier: The name must be a valid Dart
identifier, meaning it should not start with a digit and must
not be a reserved word.
• No Spaces or Hyphens: Avoid using spaces or hyphens in
the application name.
Understanding the demo App

• Every Flutter app’s main entry point is a main() method.


• The main method will be just a call to the runApp() method, provided by
Flutter itself, and passing it the top-level widget.
• Top level widget will be name of the class e.g. MyApp class which is a
stateless widget.
• The build method :build() always returns a single widget that may or may
not have children under it) is an instance of MaterialApp, which is a widget
provided by Flutter (included in the flutter/material package you see
imported at the top
• Title is set (where title is one of the named arguments to the MaterialApp’s
constructor), which is what you use in the status bar with when the app is
run.
• The primary color the theme is set for a Flutter app
• This MaterialApp widget has a single child, which is an instance of the
MyHomePage class
Understanding the demo App
• The MyHomePage class defines a stateful widget, so in this case,
we need two classes, the “core” class that extends from
StatefulWidget and the state class associated with it that extends
State.
• the state class, _MyHomePageState, that effectively is the widget
because it has a build() method.
• The build() method of that widget again returns a single widget,
this time a Scaffold widget.
• Scaffold widget provides the fundamental visual layout for the
app, including things like a status bar
• The other argument passed to the Scaffold’s constructor is body,
which is how we add other widgets as children of this one.
Top level Directories

• android – This contains Android-specific code and resources,


things like application icons, Java code, and Gradle
configuration and transient resources (Gradle being the build
system Android uses)
• ios – Just like the android directory, this directory contains
project code specific to ios.
• lib – lib is where your application code will live
• res – This directory contains some resources
• test – Here you will find Dart files for executing tests against
your app.

You might also like