Week-1
1a)Introductionto FLUTTER.
Flutter is an open-source framework developed by Google for building natively compiled
applications for mobile, web, and desktop from a single codebase. It aims to simplify and
acceleratethedevelopmentprocesswhileofferingarichsetoffeaturestoensurehighperformance
andagreatuserexperience.Flutterisanopen-sourceprojecthostedonGitHubwithcontributions from
Google and the community. Flutter uses Dart, a modern object-oriented language that compiles
to native ARM code and production ready JavaScript code.
KeyFeaturesofFlutter
1. Single Codebase for Multiple Platforms: With Flutter, you can write your application
once and deploy it on multiple platforms, including iOS, Android, web browsers,
Windows, macOS, and Linux. This reduces the need for platform-specific code and
accelerates development.
2. Dart Programming Language: Flutter uses Dart, a language also developed byGoogle.
Dart is designed to be easy to learn and use, with features that facilitate both high
performance and a smooth development experience. It supports both just-in-time (JIT)
compilationduringdevelopmentforquickiterationandahead-of-time(AOT)compilation for
optimized production builds.
3. RichSetofWidgets:Flutterprovidesacomprehensivecollectionofwidgetsthathelpyou build
complex UIs quickly. These widgets are designed to be customizable and can be
combinedtocreatehighlyinteractiveandvisuallyappealinginterfaces.Thewidgetsfollow the
Material Design guidelines for Android and the Cupertino design guidelines for iOS.
4. Fast Development with Hot Reload: One of Flutter’s standout features is Hot Reload,
which allows developers to see the results of changes almost instantly without restarting
the application. This significantly speeds up the development process and makes
experimenting with the UI easier.
5. High Performance: Flutter’s engine, written in C++, provides high performance by
renderingdirectlytotheplatform’sGPU.ThiseliminatestheneedforaJavaScript bridge,
asseeninsomeothercross-platformframeworks,ensuringthattheapprunssmoothlyand
efficiently.
6. Customizable and Extensible: Flutter's architecture allows for extensive customization
and the creation of complex UIs. Developers can build their own custom widgets and
extend existing ones to fit their needs. Additionally, the framework supports integration
withvariouspluginsandpackagestoaddfunctionalitysuchasaccessingdevicehardware,
networking, and more.
7. Strong Community and Ecosystem: Since its introduction, Flutter has gained a strong
community of developers and contributors. This has led to a growing ecosystem of
packagesandpluginsthatextendtheframework’scapabilities,makingiteasiertointegrate with
third-party services and tools.
8. Beautiful UIs: Flutter is known for its ability to create beautiful and smooth UIs. The
frameworkprovidesarangeofanimationsandvisualeffects,anditsdesignsystemallows for the
creation of highly responsive and adaptive interfaces.
HowFlutterWorks
● Rendering Engine: Flutter usesSkia, a 2D graphics library, as itsrendering engine. This
engine draws the application’s UI components directlyontothe screen, providing smooth
and high-performance rendering across different platforms.
● Widgets: Everything in Flutter is a widget, fromthe structuralelements like buttons and
menustothestylisticaspectslike fontsandcolors.WidgetsarecomposedtobuildtheUI, and
Flutter’s declarative approach makes it easy to manage state and build complex layouts.
● Platform Channels: To interact with native code or access platform-specific features,
Flutter uses platformchannels. These channels enable communicationbetweenDart code
and native code (Java/Kotlin for Android, Objective-C/Swift for iOS).
Widgets
InFlutter,awidgetisafundamentalbuildingblockusedtoconstructuserinterfaces. Widgetsare the
primary way developers define and compose the layout and behavior of their applications. Here’s
a comprehensive look at what widgets are and how they function within the Flutter framework:
Definition andPurpose
● Definition: Awidget inFlutter isa descriptionofpartofa user interface. It canrepresent
anything visible on the screen, from a simple button to a complex layout.
● Purpose: Widgetsareusedto constructtheUIofaFlutter applicationbydescribingwhat their
view should look like given their current configuration and state. They encapsulate both
the visual layout (how things look) and the behavior (how things work) of a component.
CharacteristicsofWidgets
● Immutable:WidgetsinFlutterareimmutable,meaningoncetheyarecreated,theycannot
bechanged.Ifawidgetneedstochangeitsappearanceorbehavior,anewwidgetinstance is
created with the updated configuration.
● Composable: Widgetscanbecombinedtogetherto buildcomplexUIs.Flutterprovidesa rich
set of pre-built widgets (like text, buttons, images, etc.) that can be nested and composed
to create custom widgets or entire screens.
Typesof Widgets
Fluttercategorizeswidgetsintotwomaintypesbased onhowtheymanagestate:
1. StatelessWidgets:
o Definition: Statelesswidgetsare widgetsthat do not have mutable state.Theyare
immutable and their appearance is solely a function of the configuration
information in their constructor.
o Characteristics:Statelesswidgetsaresimpleand lightweight becausetheydo not
need to manage state changes. Examples include Text, Icon, Image, etc.
ThefollowingsamplecodeshowsaStatelessWidgetbasestructure
classJournalListextendsStatelessWidget{ @override
Widgetbuild(BuildContextcontext){ return
Container();
}
}
2. StatefulWidgets:
o Definition: Stateful widgets are widgets that maintain state that might change
during the lifetime ofthe widget.Theyare responsible formanaging and updating
their own state.
o Characteristics:Statefulwidgetsaremorecomplexcomparedtostatelesswidgets
because they have mutable state. Examples include TextField, Checkbox, Slider,
etc.
ThefollowingexampleshowsaStatefulWidget basestructure
classJournalEditextendsStatefulWidget{ @override
_JournalEditStatecreateState()=>_ JournalEditState();
}
class_JournalEditStateextendsState<JournalEdit>{ @override
Widgetbuild(BuildContextcontext){ return
Container();
}
}
WidgetLifecycle
Widgets inFluttergo throughalifecyclefromcreationtodestruction:
● Creation:Widgetsareinstantiatedusingtheirconstructor,whichdefinestheir configuration.
● Build: The build() method is called to obtain the widget's UI representation based on its
current configuration.
● Update:Widgetscanberebuilt(i.e.,thebuild()methodiscalledagain)whentheir configuration
or the data they depend on changes.
● Destruction: Widgets maybe destroyed whentheyare no longer needed (e.g.,whenthey
are removed from the widget tree).
ExampleofaSimpleWidget
Here'sanexampleofastatelesswidget(Textwidget)inFlutter:
import'package:flutter/material.dart';
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
return MaterialApp(
home: Scaffold(
appBar: AppBar(title:
Text('My App'),
),
body: Center(
child: Text(
'Hello,Flutter!',
style:TextStyle(fontSize:24.0),
),
),
),
);
● In thisexample,theTextwidgetdisplaysthetext"Hello,Flutter!"in thecenter of the screen.
● TheTextwidgetisimmutableanditsappearanceisdeterminedsolelybyitsdataand
styleproperties.
● Whentheappruns,FlutterconstructsawidgettreestartingfromMyAppdowntoText,and
ultimately displays the UI on the device.
WidgetsarethefundamentalbuildingblocksofFlutterapplications,responsiblefordefiningboth the
visual layout and behavior ofthe user interface. Understanding how to create, compose, and
manage widgets effectively is crucial for developing robust and responsive Flutter applications.
1b)Installation of Flutter for Windows.
To install Flutter on Windows, follow these steps:
1. System Requirements
Ensure your system meets the minimum requirements for Flutter:
Operating System: Windows 7 or later (64-bit)
Disk Space: 1.64 GB (does not include IDE/tools)
Tools: Git for Windows (for cloning and managing Flutter projects)
2. Download Flutter SDK
Go to the Flutter installation page for Windows.
Download the latest stable Flutter SDK ZIP from the "Windows" section.
3. Extract the ZIP File
Extract the downloaded .zip file to an appropriate location on your file system (e.g.,
C:\src\flutter).
o Important: Do not install Flutter in a directory like C:\Program Files or any path with
spaces.
4. Update System Path
To run Flutter commands from any terminal window, you need to add Flutter to your system path.
Steps to add Flutter to your system path:
1. Open File Explorer, right-click This PC, and select Properties.
2. Click Advanced system settings on the left.
3. Under System Properties, click the Environment Variables button.
4. Under System Variables, find and select the Path variable, then click Edit.
5. Click New, and add the full path to the flutter\bin directory. (e.g.,
C:\src\flutter\bin).
6. Click OK to save and exit the dialogs.
5. Run Flutter Doctor
Open a new Command Prompt or PowerShell window (to apply the updated path).
Run the following command:
bash
Copy code
flutter doctor
This will check your system for dependencies required by Flutter and show the status of your
installation. The command will also suggest any required steps, such as installing Android Studio or
Xcode for macOS, if they are missing.
6. Install Dependencies
Git: If you don't have Git installed, Flutter requires Git for version control. You can install it from
Git for Windows.
Android Studio: Flutter requires Android Studio for Android development. You can download it
from here.
o Flutter Plugin: Open Android Studio, go to Plugins in the settings, and install the Flutter
plugin (this also installs Dart).
o Android SDK: During the installation of Android Studio, ensure the Android SDK is also
installed. You may need to configure the SDK in Android Studio settings.
7. Set Up Android Device or Emulator
You will need either a physical device or an emulator to run and test your Flutter applications.
For an Android Emulator:
1. Open Android Studio.
2. Go to Tools > AVD Manager to create and configure a new Android Virtual Device
(AVD).
3. Select the device type and system image, then click Finish.
8. Verify Installation
After running flutter doctor, make sure all required dependencies are installed. The output will
provide information on any missing components and how to install them.
If everything is set up correctly, you should see:
scss
Copy code
[✓] Flutter (Channel stable, vX.X.X, on Microsoft Windows [Version
10.XX], locale en-US)
[✓] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows
[✓] Connected device (2 available)
9. Create a New Flutter Project
In your terminal, navigate to the directory where you want to create your project.
Run the following command:
bash
Copy code
flutter create my_app
This creates a new Flutter project named my_app.
10. Run Your First Flutter App
Navigate to the project directory:
bash
Copy code
cd my_app
Connect your device or start the Android emulator.
Run the app:
bash
Copy code
flutter run
Troubleshooting:
If you encounter issues, flutter doctor will usually give helpful diagnostic information.
Ensure your Android Studio, Xcode (for macOS), and any other dependencies are correctly
configured.
