SAI VIDYA INSTITUTE OF TECHNOLOGY (Affiliated to VTU, Belagavi, Approved by AICTE, New Delhi and Govt. of Karnataka) Accredited by NBA, New Delhi (CSE, ISE, ECE, MECH, CIVIL), NAAC - ‘ A’ Grade Rajanukunte, Bengaluru – 560 064 Tel: 080 - 2846 8196, email: hoddatascience@saividya.ac.in web: www.saividya.ac.in Mobile Application Development with Flutter ( BCGL657A ) (As per Visvesvaraya Technological University Syllabus) Compiled by: Adjunct Faculty Assistant professor Assistant professor Dept. of CSE(DS) Dept. of CSE(DS) Dept. of CSE(DS) DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING (Data Science) 202 4 - 2 5 Disclaimer The information contained in this document is the proprietary and exclusive property of Sai Vidya Institute of Technology, Bengaluru except as otherwise indicated. No part of this document, in whole or in part, may be reproduced, stored, transmitted, or used for course material development purposes without the prior written permission of Sai Vidya Institute of Technology, Bengaluru. The information contained in this document is sub ject to change without notice. The information in this document is provided for informational purposes only. Trademark Edition: 202 4 - 2 5 Document Owners The primary contacts for questions regarding this document are: Authors: 1. Prof. 2. Pro f Department: Computer Science & Engineering (Data Science) Contact email id: 1. 2. Program Outcomes 1 Engineering Knowledge : Apply the knowledge of mathematics, science, engineering fundamentals, and an engineering specialization to the solution of complex engineering problems. 2 Problem Analysis : Identify, formulate, research literature, and analyze complex engineering problems reaching substantiated conclusions using first principles of mathematics, natural sciences, and engineering sciences. 3 Design/Development of Solutions : Design solutions for complex engineering problems and design system components or processes that meet th e specified needs with appropriate consideration for the public health and safety, and the cultural, societal, and environmental considerations. 4 Conduct Investigations of Complex Problems : Use research - based knowledge and research methods including design of experiments, analysis and interpretation of data, and synthesis of the information to provide valid conclusions. 5 Modern Tool Usage : Create, select, and apply appropriate techniques, resources, and modern engineering and IT tools including prediction and modeling to complex engineering activities with an understanding of the limitations. 6 The Engineer and Society : Apply reasoning informed by the contextual knowledge to assess societal, health, safety, legal, and cultural issues and the consequent responsib ilities relevant to the professional engineering practice 7 Environment and Sustainability : Understand the impact of the professional engineering solutions in societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable dev elopment. 8 Ethics : Apply ethical principles and commit to professional ethics and responsibilities and norms of the engineering practice. 9 Individual and Team Work : Function effectively as an individual, and as a member or leader in diverse teams, and in multidisciplinary settings. 10 Communication : Communicate effectively on complex engineering activities with the engineering community and with society at large, such as, being able to comprehend and write effective reports and design documentation, make eff ective presentations, and give and receive clear instructions. 11 Project Management and Finance : Demonstrate knowledge and understanding of the engineering and management principles and apply these to one’s own work, as a member and leader in a team, to manage projects and in multidisciplinary environments. 12 Life - Long Learning: Recognize the need for, and have the preparation and ability to engage in independent and life - long learning in the broadest context of technological change. Mobile Application Development with Flutter 4 Mobile Application Development with Flutter Subject code: BCGL657A IA Marks: 5 0 Hour/week: 02 Total Hours: 2 4 Course objectives: ● To introduce basics of Flutter platform for progressive app development ● To gain knowledge on user interface support in Flutter. ● To learn various programming elements required for app development ● To develop progressive applications with flutter. Sl No. List of Experiments Pag e N o 1 Introduction to Flutter 5 - 1 5 2 Installation of Flutter SDK and Android Studio on Windows 1 6 - 20 3 Develop an application using Flutter to print “Hello world and Hello Flutter” 21 - 22 4 Develop an application using Flutter to Increment and Decrement Numbers (Counter App). 23 - 25 5 Develop Login Screen Application. 26 - 2 8 6 Develop a “To - do List” Application 2 9 - 32 7 Develop Calculator Applicatio n 33 - 37 8 Develop an application to Check the Weather in Countries Across the world (Weather app). 38 - 41 9 Develop a “Stopwatch” application using Flutter. 42 - 44 10 Develop an application that Navigate from one Screen to another (Seamless navigation). 45 - 48 1 1 Develop Basic E - commerce UI Application. 49 - 53 1 2 Develop an application to implement Animates Logo. 54 - 55 13 Develop an application that tracks our daily Expenses and get a report chart 56 - 58 14 Develop an application to Play Quiz and get the Score Board 59 - 62 Mobile Application Development with Flutter 5 1. INTRODUCTION Flutter Flutter is an open - source UI toolkit created by Google, enabling developers to build visually appealing and high - performing applications for mobile (iOS & Android), web, and desktop platforms using a single codebase . It focuses on fast development, expressive UI, and native performance. Flut ter uses the Dart programming language. Dart is an open - source language developed by Google Why Choose Flutter? 1. Single Codebase: Write code once and deploy it across multiple platforms, saving development time and cost. 2. Fast Development: With the Hot Rel oad feature, developers can see instant changes during development without restarting the app. 3. Customizable Widgets: Flutter’s widget - based architecture makes it easy to create pixel - perfect UIs. 4. High Performance: Flutter compiles to native machine code, ensuring smooth animations and fast rendering. 5. Strong Ecosystem: Flutter has a rich library of third - party packages and tools on pub.dev Core Concepts in Flutter 1. Widgets Each element on the screen of the Flutter app is a widget. The view of the screen completely depends upon the choice and sequence of the widgets used to build the apps. And the structure of the code of apps is a tree of widgets. 1.1 Category of Widge ts There are mainly 14 categories into which the flutter widgets are divided. They are mainly segregated on the basis of the functionality they provide in a flutter application. Widgets Description Accessibility These are the set of widgets that make a Flutter app more easily accessible. Animation and Motion These widgets add animation to other widgets. Assets, Images, and Icons These widgets take charge of assets such as display images and show icons. Async These provide async functionality in the Flutter application. Basics These are the bundle of widgets that are absolutely necessary for the Mobile Application Development with Flutter 6 Widgets Description development of any Flutter application. Cupertino These are the iOS - designed widgets. Input This set of widgets provides input functionality in a Flutter application. Interaction Models These widgets are here to manage touch events and route users to different views in the application. Layout This bundle of widgets helps in placing the other widgets on the screen as needed. Material Components This is a set of widgets that mainly follow material design by Google. Painting and effects This is the set of widgets that apply visual changes to their child widgets without changing their layout or shape. Scrolling This provides scroll ability of to a set of ot her widgets that are not scrollable by default. Styling This deals with the theme, responsiveness, and sizing of the app. Text This displays text. 1.2 Types of Widgets There are broadly two types of widgets in the flutter: Stateless Widget Stateful Widget Stateless Widget Stateless Widget is a type of widget which once built , then it’s properties and state can’t be changed. These widgets are immutable, once created can’t be modified. Examples: Display Text , Icons, Images, etc. ( A state is basicall y dynamic information that determines how a widget looks and behaves. For example: A button’s state could be “enabled” or “disabled,” affecting its appearance and functionality. A text field’s state could be the text the user enters, changing what’s displa yed. ) Mobile Application Development with Flutter 7 Why use Stateless Widgets? Simple construction means they render quickly. Easy to understand and use. Once built, they always look the same. A Stateless widget allows the “build” method to enact only once that too when the widget parameters are execu ted. Example of a stateless widgets import 'package:flutter/material.dart'; class HelloWorld extends StatelessWidget { @override Widget build(BuildContext context) { return Text("Hello World!"); } } Stateful Widget Stateful Widgets is a type of widget that can change state. It can maintain and update the appearance in the response to change in state. Examples: Buttons, Sliders, Text Fields, etc. Stateful widgets have internal data (their state) that can change, affecting their appearance or behavior. Hence, Stateful widgets are perfect for interactive elements like Buttons that change color when pressed Forms that update as you type Counters that keep track of a score Text fields that update content Progress bars that show loading Why use Stateful Widgets? Highly interactive: Respond to user actions and data changes. Flexible: Adapt to different situations. Powerful: Build complex and dynamic interfaces. Overview First, let’s have an overview of the stages in the lifecycle of a stateful widget, and which method is invoked at which stage of the lifecycle. 1. createState(): Upon creation of the stateful widget, its constructor is called, which initializes the widget. The createState() method is then invoked, which creates the state object for the widget. 2. initState: This method is called after the widget is inserted into the widget tree, when the object is created for the first time. Mobile Application Development with Flutter 8 3. didChangeDependencies: This method is called when a dependency of this widget changes. It is useful when the widg et depends on some external data or inherits data from its parent widget. It is also called immediately after initState(). 4. build: Builds the widget’s user interface based on its current state. This method is called initially when the widget is first insert ed into the widget tree, and may be called repeatedly during the lifecycle whenever the widget needs to be rebuilt. 5. setState: Triggers a rebuild of the widget when the state changes and the associated methods are called again. 6. didUpdateWidget: Triggered wh en the widget is rebuilt with updated properties. It is called after build() and allows you to compare the previous and current widget properties. 7. deactivate: Called when the widget is removed from the tree but might be inserted again. 8. dispose: Called when the widget is removed from the widget tree permanently, allowing you to release resources held by the widget. 9. reassemble: Called when the application is reassembled during hot reload. Example of a stateful widget ( A counter app where numbers increase w hen a button is clicked. ) import 'package:flutter/material.dart'; class CounterApp extends StatefulWidget { @override _CounterAppState createState() => _CounterAppState(); } class _CounterAppState extends State<CounterApp> { Mobile Application Development with Flutter 9 int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Counter App')), body: Center( child: Text('Counter: $_counter'), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); } } Mobile Application Development with Flutter 10 1.3 The Widget Tree: A Hierarchy of Widgets The widget tree is precisely what it sounds like — a tree structure where each node is a widget. This structure determines how your app's UI is organized and displayed. Widgets are arranged hierarchically, forming a parent - child relationship. In this snippet, MaterialApp, Scaffold, AppBar, Center, and Text are all widgets, forming a widget tree. How Does It Work? Understanding how the widget tree works is crucial for Flutter development. When something changes (like a button press or data update), Flutter knows exactly what to update in the UI thanks to this tr ee structure. Here's a simplified overview: 1. Widgets Rebuild : When something triggers a change, the affected widgets rebuild. 2. Diffing Process : Flutter's engine performs a 'diffing' process, comparing the new widget tree with the previous one. 3. Efficient Upda tes : Flutter updates only the parts of the widget tree that have changed, making it incredibly efficient. 1.4 Navigating the Tree To create responsive and interactive apps, you'll often need to navigate this tree. Here's how: State Management : Widgets can hold data and pass it down the tree. This enables sharing information between distant parts of your app. Gesture Detection : To respond to user interactions, you can wrap widgets with gesture detectors that "listen" for taps, swipes, etc. Conditional Render ing : Based on the app's state, you can conditionally render or hide widgets deep within the tree. Building Reusable Components : Break your UI into smaller, reusable widget components. This keeps your code clean and maintainable. Mobile Application Development with Flutter 11 2. DART Dart is an open - source general - purpose programming language developed by Google. It supports application development on both the client and server side. However, it is widely used for the development of Android apps, iOS apps, IoT(Internet of Things), and web applications using the Flutter framework. Dart is similar to other C - like languages, such as Java and Javascript. Why to Use Dart Fast & Smooth: Dart compiles to native code for speedy performance, ideal for mobile apps. Easy to Learn: Similar to familiar languages like Java or Javascript, making it approachable for new developers. Flutter Power: Dart is the heart of Flutter, a popular framework for building beautiful and functional mobile apps. One Code, Many Places: Develop for mobile, web, and even desktop with a single codebase (primarily with Flutter). Dart – Data Types The data type classification is as given below: Data Type Keyword Description Number int, double, num, BigInt Numbers in Dart are used to represent numeric literals Strings String Strings represent a sequence of characters Booleans Bool It represents Boolean values true and false Lists List It is an ordered group of objects Maps Map It represents a set of values as key - value pairs 1. Number The number in Dart Programming is the data type that is used to hold the numeric value. Dart numbers can be classified as: int: data type is used to represent whole numbers (64 - bit Max). double: data type is used to represent 64 - bit precise floating - point numbers. num: type is an inherited data type of the int and double types. Syntax : int age = 25; double price = 99.99; 2. String It used to represent a sequence of characters. It is a sequence of UTF - 16 code units. The keyword string is used to represent string literals. String values are embedded in either single or double - quotes. Syntax: String str_name; Mobile Application Development with Flutter 12 3. Boolean It represents Boolean values true and false. The keyword bool is used to represent a Boolean literal in DART. Syntax : bool var_name; 4. List List data type is similar to arrays in other programming languages. A list is used to represent a collection of objects. It is an ordered group of objects. There are multiple methods to declare List in Dart as mentioned below: 1. V ariable Size List List<int> var_name1 = []; 2. Fixed Size List Fixed Size doesn’t mean that we can’t change the size of List, but we have predefined that the List has this much elements while declaring. List<int> var_name1 = List<int>.fille d(size, 0); 5. Map The Map object is a key and value pair. Keys and values on a map may be of any type. It is a dynamic collection. While Declaring Map there can be only two cases one where declared Map is empty and another where declared Map contains elem ents in it 1. Declaring Empty Map var map_name = new Map(); 2. Declaring Map with Elements inside it var map_name{ key1 : value1: key2 : value2; } Dart – Classes And Objects Dart is an object - oriented programming language, so it supports the concept of class, object ... etc. In Dart, we can define classes and objects of our own. We use the class keyword to do so. Dart supports object - oriented programming features like classes and interfac es. Declaring class in Dart Syntax : Class class_name { // Body of class } In the above syntax: Class is the keyword used to initialize the class. class_name is the name of the class. The body of the class consists of fields, constructors, getter and setter methods, etc. Mobile Application Development with Flutter 13 Objects in Dart Objects are the instance of the class and they are declared by using a new keyword followed by the class name. Syntax: var object_name = new class_name([ arguments ]); In the above syntax: new is the keyword use to declare the instance of the class object_name is the name of the object and its naming is similar to the variable name in dart. class_name is the name of the class whose ins tance variable is been created. arguments are the input which are needed to be pass if we are willing to call a constructor. Dart – Functions The function is a set of statements that take inputs, do some specific computation and produces output. Functions are created when certain statements are repeatedly occurring in the program and a function is created to replace them. Functions make it easy to divide the complex program into smaller sub - groups and increase the code reusability of the program. Defining the Function in Dart Dart provides us with the facility of using functions in its program. In the above syntax: function_name: defines the name of the function. return_type: defines the datatype in which output is going to come. return value: defines the value to be returned from the function. Advantages of Dart programming Language Cross - Platform Development : Write once, deploy on mobile (iOS, Android), web, and desktop platforms. High Performance : AOT Compilation : Native code en sures fast app startup and execution. JIT Compilation : Enables hot reload during development for quick iteration. Easy to Learn : Clean, familiar syntax (similar to Java/C#), making it beginner - friendly. Null Safety : Prevents null pointer errors by distinguishing nullable and non - nullable types. Mobile Application Development with Flutter 14 Fast Development : Features like hot reload in Flutter speed up UI design and debugging. Asynchronous Programming : Simplified handling of async tasks using async , await , and Future Object - Oriented : C lass - based with support for mixins, extensions, and reusable code patterns. Rich Libraries and Ecosystem : Built - in tools and a large package repository ( pub.dev ) for additional functionality. Optimized for UI : Works seamlessly with Flutter for building expressive, dynamic UIs. Strong Backing : Supported by Google with an active community and regular updates. Flutter vs Native Development : Feature Flutter Native Development Platform Support Cross - platform (iOS, Android, Web, Desktop) with a single codebase. Platform - specific (Separate codebases for iOS and Android). Development Speed Faster with Hot Reload and reusable widgets. Slower due to separate development and no hot reload. Cost Cost - effective as it requires one team and one codebase. Expensive due to separate teams for iOS and Android. UI/UX Consistent UI across platforms with a rich widget library. Platform - specific design that adheres to native guidelines (Material Design for Android, Cupertino for iOS). Performance Near - native performance with AOT (Ahead - of - Time) compilation; slightly slower for resource - heavy apps. Best performance as apps run directly on native platform APIs. Animation Support Built - in libraries for smooth animations with less effort. Advanced animatio ns require more custom code and effort. Codebase Maintenance Single codebase is easier to maintain, debug, and update. Two separate codebases require duplication of work and effort for updates or fixes. Time - to - Market Faster due to cross - platform support and pre - built UI components. Slower as separate apps need to be developed and tested for iOS and Android. Access to Native Features Access via plugins or platform channels; requires custom code for advanced features. Direct access to all platform APIs an d hardware without additional layers. Development Ecosystem Strong ecosystem with many plugins and packages via pub.dev ; community Mature and robust ecosystems for both iOS and Android; separate Mobile Application Development with Flutter 15 Feature Flutter Native Development and Google backing ensure rapid growth. tools and libraries for each platform. Scalability Scalable for most apps, with growing support for web and desktop. Highly scalable for complex and platform - specific apps. Learning Curve Easy to learn with clean Dart syntax; less steep compared to learning both Kotlin/Java (Android) and Swift/Objective - C (iOS). More challenging, as developers need to learn and manage different languages and frameworks for iOS and Android. Performance Intensity Suitable for most business apps, social apps, or e - commerce apps; may face sligh t performance dips for resource - intensive apps like 3D games. Best for hardware - intensive apps (e.g., AR, VR, gaming) or apps requiring maximum platform - level performance. UI Customization Highly customizable due to its own rendering engine, but may requi re effort for platform - native look and feel. Native components integrate seamlessly into the platform and look more “natural.” Future Proofing Backed by Google with expanding multi - platform support (web, desktop, mobile). Guaranteed long - term support from Apple (iOS) and Google (Android), but platform changes require more frequent updates. Mobile Application Development with Flutter 16 2) Installation of Flutter Step 1 : Download Flutter SDK: To download Flutter SDK, Go to its official website , click on Get started button, you will get the following screen. Step 2: Next, to download the latest Flutter SDK, click on the Windows icon . Here, you will find the download link for SDK Step 3: When your download is complete, extract the zip file and place it in the desired installation folder or location, for example, D: /Flutter. Step 4: To run the Flutt er command in regular windows console, you need to update the system path to include the flutter bin directory. The following steps are required to do this: Step 4.1: Go to MyComputer properties - > advanced tab - > environment variables. You will get the fo llowing screen. Mobile Application Development with Flutter 17 Step 4.2: Now, select path - > click on edit. The following screen appears. Step 4.3: In the above window, click on New - >write path of Flutter bin folder in variable value - > ok - > ok - > ok. Step 5: Now, run the $ flutter doctor command. This command checks for all the requirements of Flutter app development and displays a report of the status of your Flutter installation. Step 6: When you run the above command, it will analyze the system and show its report, as shown in the belo w image. Here, you will find the details of all missing tools, which required to run Flutter as well as the development tools that are available but not connected with the device. Mobile Application Development with Flutter 18 Step 7: Install the Android SDK or Visual studio IDE . If the flutter docto r command does not find the Android SDK tool in your system, then you need first to install the Android Studio IDE. To install Android Studio IDE, do the following steps. Step 7.1: Download the latest Android Studio Visual studio IDE executable or zip file from the official site Step 7.2: When the download is complete, open the .exe file and run it. You will get the following dialog box. Step 7.3: Follow the steps of the ins tallation wizard. Once the installation wizard completes, you will get the following screen. Step 7.4: In the above screen, click Next - > Finish. Once the Finish button is clicked, you need to choose the 'Don't import Settings option’ and click OK. It wil l start the Android Studio. Mobile Application Development with Flutter 19 Step 8: Next, you need to set up an Android emulator. It is responsible for running and testing the Flutter application. Step 8.1: To set an Android emulator, go to Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. Or, go to Help - >Find Action - >Type Emulator in the search box. You will get the following screen. Step 8.2: Choose your device definition and click on Next. Step 8.3: Select the system image for the latest Android version and click on Next. Step 8.4: Now, verify the all AVD configuration. If it is correct, click on Finish. The following screen appears. Mobile Application Development with Flutter 20 Step 8.5: Last, click on the icon pointed into the red color rectangle. The Android emulator displayed as below scree n. Step 9 : Now, install Flutter and Dart plugin for building Flutter application in Android Studio. These plugins provide a template to create a Flutter application, give an option to run and debug Flutter application in the Android Studio itself. Do the following steps to install these plugins. Step 9.1: Open the Android Studio and then go to File - >Settings - >Plugins. Step 9.2: Now, search the Flutter plugin. If found, select Flutter plugin and click install. When you click on install, it will ask you to install Dar t plugin as below screen. Click yes to proceed. Step 9.3: Restart the Android Studio.