Google search engine
Home Blog Page 66

Selenium WebDriver Architecture in Testing

Shaiq Khan
-
0
Selenium WebDriver Architecture in Testing

Hi everyone! today we explore Selenium WebDriver Architecture In Testing. In the modern world, with each passing day, hundreds of web and mobile applications are being deployed to the web. QA team has to always be on their toes to ensure that these web applications are functional outside the development environment by ensuring the functionality is adequately tested before release to the customer.

Prior, this drawn-out task was finished by the manual testers through the human force of perception, taking a gigantic measure of time. Selenium entered the business. Selenium is a set-up of devices viz. Selenium IDE, WebDriver, Selenium RC, and so forth assist the QA with joining to mimic client activities on the internet browser and mechanizes the client stream, consequently helping in executing a huge no of experiments in a limited capacity to focus time.

Selenium Webdriver is one of the basic individuals from this family and is notable for its variety and security for web automation. Selenium Webdriver has sort of turned into a true for UI automation and over 80% of the organizations are utilizing it. Let’s understand the details of this tool by covering the following sections:

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

What is Selenium?

Selenium is a free (open source) automated testing framework used to validate web applications across different browsers and platforms. You can use multiple programming languages like Java, C#, Python, etc to create Selenium Test Scripts. Testing done using the Selenium testing tool is usually referred to as Selenium Testing.

Selenium Software is not just a single tool but a suite of software, each piece catering to different Selenium QA testing needs of an organization. Here is the list of tools

  • Selenium Integrated Development Environment (IDE)
  • Selenium Remote Control (RC)
  • WebDriver
  • Selenium Grid

At the moment, Selenium RC and WebDriver are merged into a single framework to form Selenium 2.

What is Selenium WebDriver?

Selenium WebDriver is a bunch of open-source APIs, which furnished the capacities to collaborate with any of the cutting-edge internet browsers and afterward, thus, computerize the client activities with that program.

It is a fundamental part of the Selenium family. As we probably are aware, Selenium is not a free device; rather, an assortment of instruments make the Selenium suite, which was made when two undertakings Selenium RC and WebDriver were blended.

Why use Selenium WebDriver for Web Automation?

Now that we know what Selenium WebDriver is and what it does let’s take a look at why it is the optimum choice to use for web automation.

  • DescriptionDynamic Web Page Automation: Selenium WebDriver can mechanize dynamic sites where the substance of pages changes by client activities.
  • Works Close to Browser: Program merchants transport their WebDriver execution. Subsequently, they are firmly coupled to the program giving a superior testing experience.
  • Technology Agnostic: Selenium WebDriver permits you to mechanize the experiments for all the web applications, regardless of the innovation utilized for the improvement of the application under test.
  • Mimics Real User: Selenium WebDriver permits QA to impersonate client activities on the sites. Selenium WebDriver can imitate ordinary client activities like structure filling, clicking, double tapping, and key-press, as well as cutting edge client activities like simplified, snap and hold, and so on.
  • Supports Cross Browser Testing: Selenium WebDriver enjoys the main benefit while doing cross-program testing — where a QA can test for a similar site, utilizing a similar piece of code on various programs. It empowers the confirmation and approval of experiments on numerous arrangements of programs simultaneously.
  • Supports parallel Execution: On the off chance that there are more scripts to be executed on numerous programs, doing them individually is tedious. So Selenium WebDriver permits equal execution, utilizing structures like TestNG, so the execution of experiments is quicker. This permits huge scope execution of experiments in a brief time frame.
  • View Execution Results: Selenium WebDriver permits a QA to see the live execution of the mechanized trial on the PC framework as well as on some other CI/CD pipeline machine by supporting functionalities like the screen capture, video-recording of test cases, and so on.
  • Supports modern development techniques: Selenium WebDriver coordinates very well with present-day Software Development standards like Behavior Driven Development through reconciliation with the Cucumber library.

In general, Selenium WebDriver is one of the main pieces of the Selenium suites, which upholds practically every one of the highlights required for the automation of a web application.

Why Selenium WebDriver is popular?

Apart from the above-mentioned capabilities, WebDriver, being part of the Selenium family, also encompassed some unique characteristics, which adds to its popularity as a web automation tool. A few of those characteristics are:

  • Multi-Browser Compatibility — One of the excellent explanations behind the prevalence of Selenium and WebDriver is its cross-program support utilizing a similar piece of code. It provides the capacity to run a particular piece of code that imitates a certifiable client utilizing a program’s local help to hit direct API calls without the requirement for any middleware software or device. The below shows a sample list of browsers supported:
  • Multi-Language Support — Not all testers are knowledgeable about a specific language. Since Selenium offers help for some dialects so a tester can utilize any language out of the upheld dialects and afterward use WebDriver for automation. This allows composing code in the language individuals is alright with.
  • Faster Execution —Unlike Selenium RC, WebDriver doesn’t rely upon a middleware server to communicate with the browser. WebDriver coordinates correspondences with browsers utilizing a characterized convention (JSON Wire), which empowers it to convey quicker than most Selenium devices. Additionally, since JSON Wire itself utilizes JSON, which is exceptionally lightweight, how much information move per call is extremely least. The below figure shows clearly how the WebDriver communicates with the Browser:
  • Locating Web Elements — To perform activities like Click, Type, Drag, and Drop we first need to distinguish on which web component (like button, checkbox, drop-down, text region) we want to play out an activity. To work with this, WebDriver has given techniques to distinguish web components utilizing different HTML credits — like id, name, class, CSS, label name, XPath, interface text, and so on.
  • Handling dynamic web elements — There are times when there are web components on the page that, change with each reload of the page. Since the HTML credits transform, it turns into a test to recognize these components. Selenium gives different strategies to deal with these circumstances –
  • Absolute Xpath — this contains the complete XML path of the element in question.
  • Contains( ) — using these functional elements can be searched with partial or full text and can be used to handle dynamic elements.
  • Starts-With( ) — this function is based on finding elements using starting text of the attribute under question.
  • Handling Waiting for Elements — Not every one of the pages has a similar construction. Some are lightweight, while some have a lot of information taking care of or AJAX calls. Commonly the web components get some margin to stack. To represent this WebDriver has given various holding up components that can be utilized to stop the content execution for a necessary measure of time given specific circumstances and afterward proceed with once the condition is full-filled. The accompanying figure shows an example list that shows the capacities of WebDriver which helps in dealing with the unique way of behaving of web pages.

What are the drawbacks of Selenium WebDriver?

Although Selenium works a long way out in solving the *UI *and functional automation of web applications, it is not without its drawbacks. Let’s look at some of the shortcomings/drawbacks:

  • Requires Programming Knowledge and Expertise — Since WebDriver permits you to computerize the client activities utilizing code written in a specific programming language, any individual who needs to utilize it ought to have an essential comprehension of how coding in the language functions. Individuals who don’t have a comprehension of coding in a programming language will find it hard to utilize WebDriver.
  • No Support for Desktop Applications — Selenium environment, including WebDriver, was worked for the automation of web applications. In that capacity assuming you are hoping to Automate windows based applications, you can not do such.
  • No Customer Support — The selenium ecosystem, including WebDriver is open-source, and that implies it is driven by people and not by any organization. Along these lines, there is not a committed help group to investigate your issues. On the off chance that an individual has stuck someplace, there are numerous networks, and discussions on which an individual can depend, however, there’s nothing else to it.
  • No Built-In Object Repository — Paid tools like UFT/QTP give a concentrated area to store objects/components, called the Object Repository. This capacity isn’t given as a matter of course in Selenium WebDriver. This can be defeated utilizing approaches like the Page Object Model, yet it requires impressive coding abilities and aptitude.
  • Lack of built-in reporting — Selenium WebDriver can assist you with running your automation tests yet to give a detailing capacity, you would have to coordinate it with a testing framework like Junit, TestNG, PyTest, Allure, and so on.
  • Managing Browser-Selenium Dependencies —Since Selenium needs to depend on similarity between the program drivers and the genuine program itself, commonly because of contradiction or bugs in either the program driver or program, usefulness breaks, and clients need to depend on local area backing to sort it out.

Understanding of Selenium WebDriver Architecture:

Being a piece of the general part framework, we find that the Selenium WebDriver isn’t a standalone testing tool. It involves different parts that are expected to run tests. These are the architectural components of Selenium.

So first let’s take a look at this image below

This image tells us about the core selenium web driver architecture and the major selenium components which comprise WebDriver.

  • Selenium WebDriver Client Libraries / Language Bindings — Software Testers need to select languages that they are comfortable with. Since WebDriver Architecture upholds various dialects, so there are ties accessible for a scope of dialects like Java, C#, Python, Ruby, PHP, and so on. Any individual who has fundamental information on working with any programming language can get explicit language ties and can get going. This is the way Selenium Architecture gives adaptability to testers to do automation in their usual range of familiarity.
  • JSON WIRE PROTOCOL — According to the Selenium Architecture over, the JSON Wire Protocol works with all the correspondence that is occurring in Selenium between the program and the code. This is the core of Selenium. JSON Wire Protocol gives a medium to information move utilizing a RESTful (Representational State Transfer) API which gives a vehicle system and characterizes a RESTful web service using JSON over HTTP.
  • Browser Drivers — Since different programs are upheld by Selenium, every program has its execution of the W3C standard that Selenium gives. As such program explicit doubles are accessible that are intended for the program and conceal the execution rationale from the end client. JSONWire convention lays out an association between the program pairs and the client libraries.
  • Browsers — Selenium will be simply ready to run tests on the browser if they are privately introduced, either on the local machine or on the server machines. So browser installation is essential.

How does Selenium WebDriver work?

In the section above, we saw the architecture of Selenium. Now let’s see how behind the scenes all the communication happens.

Take a look at the image below — this shows a view of what the actual workflow looks like.

When a user writes a WebDriver code in Selenium and executes it, the following actions happen in the background:

  • An HTTP request generates, and it goes to the respective browser driver (Chrome, IE, Firefox). There is an individual request for each Selenium command.
  • The browser driver receives the request through an HTTP server.
  • The HTTP server decides which actions/instructions need to execute on the browser.
  • The browser executes the instructions/steps as decided above.
  • The HTTP server then receives the execution status and then sends back the status to an automation script, which then shows the result ( as passed or an exception or error).

How to use Selenium WebDriver for Web Automation?

Selenium WebDriver provides a very seamless, user-friendly, and code-friendly approach to automation using various browsers. Since it supports most of the major browser vendors, it’s just a matter of using the respective browser driver and browser and setting up Selenium to use the same.

For any Selenium test script, there are generally the following 7 steps, which apply to all the test cases and all the applications under test (AUT):

  1. Create an instance of WebDriver specific to the Browser:
  • Eg: To create an instance of the Firefox driver, we can use the following commands:
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
WebDriver driver = new FirefoxDriver();

2. Navigate to the desired Web page which needs to be automated:

driver.get("https://www.google.com/")

3. Locate an HTML element on the Web page:

  • To interact with a web page, we need to locate the HTML elements on the web page. We can use any of the element locator strategies mentioned in “Selenium Locators”. Eg: if we want to get the “Full Name” text box, we can use the following commands:
import org.openqa.selenium.By; 
import org.openqa.selenium.WebElement; 
WebElement usernameElement = driver.findElement(By.id("userName"));

4. Act on an HTML element:

We can perform certain actions on the HTML elements, such as typing something using the SendKeys method, and clicking on the element if it is a button. Eg: if we want to type the name in the identified text box, we can use the following commands:

usernameElement.sendKeys("Pragati Oli");

5. Run tests and record test results using a test framework.

And, we are done with using the WebDriver to identify and perform the needed actions on the Web Application. Depending on the browser, on which we need to test our application, we can use the corresponding WebDriver.

Here is a list of various browsers and their respective browser drivers:

Recently Microsoft moved their Edge browser to the same platform as Chromium (which is the parent for Chrome), and due to this ChromeDriver can now also support Microsoft Edge Chromium.

Conclusion:

Selenium is a cost-effective and flexible tool developer can use in the automation testing of their web applications. The most intriguing feature of this software is the capacity to test applications across different internet browsers. This guarantees that sites don’t crash or breakdown down specific programs.

The Selenium software is great for organizations creating applications that help heavy traffic, particularly friendly stages and internet business sites. This software has gone through progress throughout the long term, which has increased the value of web development.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Explore Freezed In Flutter

Shaiq Khan
-
0
Explore Freezed In Flutter

Hello Everyone.! In this article, we learn about Freezed in Flutter Application. And how it works in Flutter Applications. With the help of freezed, we can reduce the lines of code.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents:

Introduction

How to Use

Implementation

Conclusion

Introduction:

Freezed is a code-generation package that helps you to create data classes in Dart. It stops you from writing a ton of error-prone lines. Sometimes you just want a class that obtains its values in a constructor, a toString method, and maybe value impartiality. That lone is a lot. But now visualize you want objects to remain fixed. For that, you need an extra copyWith method. If you know how to implement all this in Dart, you surely know that it takes many lines of code to achieve this.

How to Use Freezed:

  • Project Setup:- For using freezed first you need to create a project. Open Android Studio, create a new Flutter Project, and add the project’s name, project location, description, and also domain. For any project, we have to choose the platform, on which we want to run our project. After that, we have to add some dependencies which are necessary to use
  • Install:- First we have to add some dependencies in our project by which we can easily use Freezed. Build_Runner, Freezed, Freezed_Annotation.
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^2.1.7
freezed: ^1.1.1
freezed_annotation: ^1.1.0

or we can add these dependencies by using commands.

flutter pub add freezed_annotation
flutter pub add --dev build_runner
flutter pub add --dev freezed

> freezed:- Freezed package is used to create the model. It’s code generator for data-classes/unions/pattern-matching/cloning.

> build_runner:- The build_runner package provides a concrete way of generating files using Dart code, outside of tools like the pub. Unlike pub serve/build, files are always generated directly on disk, and rebuilds are incremental – inspired by tools such as Bazel.

> freezed_annotation:- Freezed_annotations for freezed. This package does nothing without freezed. If we want to use Freezed so we have to use this package without this we can’t use Freezed.

  • Run the generator:- To run the code generator, execute the following command.
flutter pub run build_runner build

> When the packages providing Builder are configured with a build. ymal file they are designed to be consumed using a generated build script. Most builders should need little or no configuration, see the documentation provided with the Builder to decide whether the build needs to be customized. If it does you may also provide a build. ymal with the configuration.

and also add import the packages in dart file.

import 'package:freezed/builder.dart';
  • Creating a Model using Freezed:- First, you have to create a class that has the @freezed annotation. We create a class with the name of TestModel{}.
import 'package:freezed_annotation/freezed_annotation.dart';part 'response.freezed.dart';
part 'response.g.dart';@freezed
class TestModel{}

After creating the class we define the class with mixins. A mixin is a class whose methods and properties can be used by other classes without sub-classing.

import 'package:freezed_annotation/freezed_annotation.dart';part 'response.freezed.dart';
part 'response.g.dart';@freezed
class TestModel with _$TestModel{}

Now we add a factory method as a constructor with a list of all the arguments/properties. Here we have defined @Default inside the factory method which comes from ‘freezed_annotation’.The @Default annotation is used to set a default value for non-required properties.

import 'package:freezed_annotation/freezed_annotation.dart';part 'response.freezed.dart';
part 'response.g.dart';@freezed
class TestModel with _$TestModel {
@JsonSerializable(fieldRename: FieldRename.snake, explicitToJson: true)
const factory TestModel({
@JsonKey(name: 'id') int? id,
@JsonKey(name: 'label') String? label,
@JsonKey(name: 'image') String? image,
@JsonKey(name: 'status') int? status,

}) = _TestModel;

And at last, we have now created our constructor, In which we have to implement fromJson/toJson. In the freezed package, fromJson and toJson are not generated, but it knows what json_serializable is.

import 'package:freezed_annotation/freezed_annotation.dart';

part 'response.freezed.dart';
part 'response.g.dart';@freezed
class TestModel with _$TestModel {
@JsonSerializable(fieldRename: FieldRename.snake, explicitToJson: true)
const factory TestModel({
@JsonKey(name: 'id') int? id,
@JsonKey(name: 'label') String? label,
@JsonKey(name: 'image') String? image,
@JsonKey(name: 'status') int? status,

}) = _TestModel;

factory TestModel.fromJson(Map<String, dynamic> json) =>
_$TestModelFromJson(json);
}

For creating a response.freezed.dart and response.g.dart we have to run the command if we don’t run this command so our code will show errors. The next step is to navigate within the terminal to the folder where our project is located and execute the following command.

flutter pub run build_runner build --delete-conflicting-outputs

Conclusion:

In this article, we have been through how to use Freezed in Flutter. In this, you can see how it is to use, how much code will be saved, and also the time we can save by using freezed By using we can perform many operations and create a Flutter application.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Implement Bottom Navy Bar In Flutter

Shaiq Khan
-
0
Implement Bottom Navy Bar In Flutter

Whenever you will code for building anything in Flutter, it will be inside a widget. The focal design is to construct the application out of widgets. It depicts how your application view should look with its ongoing design and state. Right when you make any changes in the code, the widget adjusts its portrayal by working out the separation between the past and current widget to pick the unimportant changes for conveying in the UI of the application.

In Flutter, to assemble any application, we start with widgets. The building block of flutter applications. Widgets depict what their view ought to resemble given their ongoing setup and state. It consists of a text widget, line widget, segment widget, container widget, and some more.

In this article, we will explore the Bottom Navy Bar In Flutter. We will implement the Bottom Navy Bar demo program and learn how to use the same in your flutter applications.

bottom_navy_bar | Flutter Package
A beautiful and animated bottom navigation. The navigation bar uses your current theme, but you are free to customize…pub.dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

Bottom Navy Bar

Properties

Code Implement

Code File

Conclusion

GitHub Link

Bottom Navy Bar:

Bottom Navy Bar in Flutter is a lovely and animated bottom navigation Widget. The navigation bar utilizes our ongoing theme, yet we are allowed to customize it.

We have the BottomNavyBar widget, which we can use in the Scaffold to give the bottom navigation bar. Alongside it, we additionally have BottomNavyBarItem, which we can use inside the BottomNavyBar widget to give the items.

Demo Module :

Properties:

There are some properties of Bottom Navy Bar and Bottom Navy Bar Item:

> BottomNavyBar

  • iconSize – the item icon’s size
  • items – navigation items, required more than one item and less than six
  • selectedIndex – the current item index. Use this to change the selected item. Default to zero
  • onItemSelected – required to listen when an item is tapped it provides the selected item’s index
  • backgroundColor – the navigation bar’s background color
  • showElevation – if false the app bar’s elevation will be removed
  • mainAxisAlignment – use this property to change the horizontal alignment of the items. It is mostly used when you have only two items and you want to center the items
  • curve – param to customize the item change’s animation
  • containerHeight – changes the Navigation Bar’s height

> BottomNavyBarItem

  • icon – the icon of this item
  • title – the text that will appear next to the icon when this item is selected
  • activeColor – the active item’s background and text color
  • inactiveColor – the inactive item’s icon color
  • textAlign – property to change the alignment of the item title

How to implement code in dart file:

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we implement PageView with a controller and multiple children in our scaffold.

PageView(
controller: _pageController,
children: <Widget>[
Container(
color: Colors.red,
child: Center(
child: Image.asset(
'assets/1.jpeg',
),
),
),
Container(
color: Colors.green,
child: Center(
child: Image.asset(
'assets/2.jpeg',
),
),
),
Container(
color: Colors.yellow,
child: Center(
child: Image.asset(
'assets/3.jpeg',
),
),
),
Container(
color: Colors.blue,
child: Center(
child: Image.asset(
'assets/4.jpeg',
),
),
),
],
),

then we implement the bottom navy bar as the bottom navigation bar in our scaffold,

BottomNavyBar(
containerHeight: 55.0,
backgroundColor: Colors.white70,
selectedIndex: _currentIndex,
showElevation: false,
itemCornerRadius: 24,
curve: Curves.easeIn,
onItemSelected: (index) => setState(() {
_currentIndex = index;
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 100),
curve: Curves.easeIn);
}),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

and then we items for the bottom navy bar with different icons and different properties,

items: <BottomNavyBarItem>[
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.apps),
title: const Text('Home'),
activeColor: Colors.red,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.search_outlined),
title: const Text('Search'),
activeColor: Colors.green,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.settings),
title: const Text(
'Settings ',
),
activeColor: Colors.yellow,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.account_box),
title: const Text('Account'),
activeColor: Colors.blue,
textAlign: TextAlign.center,
),
],

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:example_bottom_navy_bar/splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';void main() {
runApp(const MyApp());
}class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Splash(),
);
}
}class MyBottomNavyBar extends StatefulWidget {
const MyBottomNavyBar({Key? key}) : super(key: key); @override
BottomNavyBarState createState() => BottomNavyBarState();
}class BottomNavyBarState extends State<MyBottomNavyBar> {
PageController _pageController = PageController();
int _currentIndex = 0; @override
void initState() {
super.initState();
_pageController = PageController();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Center(
child: Text("Bottom Navy Bar"),
),
),
body: PageView(
controller: _pageController,
children: <Widget>[
Container(
color: Colors.red,
child: Center(
child: Image.asset(
'assets/1.jpeg',
),
),
),
Container(
color: Colors.green,
child: Center(
child: Image.asset(
'assets/2.jpeg',
),
),
),
Container(
color: Colors.yellow,
child: Center(
child: Image.asset(
'assets/3.jpeg',
),
),
),
Container(
color: Colors.blue,
child: Center(
child: Image.asset(
'assets/4.jpeg',
),
),
),
],
),
bottomNavigationBar: BottomNavyBar(
containerHeight: 55.0,
backgroundColor: Colors.white70,
selectedIndex: _currentIndex,
showElevation: false,
itemCornerRadius: 24,
curve: Curves.easeIn,
onItemSelected: (index) => setState(() {
_currentIndex = index;
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 100),
curve: Curves.easeIn);
}),
items: <BottomNavyBarItem>[
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.apps),
title: const Text('Home'),
activeColor: Colors.red,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.search_outlined),
title: const Text('Search'),
activeColor: Colors.green,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.settings),
title: const Text(
'Settings ',
),
activeColor: Colors.yellow,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.account_box),
title: const Text('Account'),
activeColor: Colors.blue,
textAlign: TextAlign.center,
),
],
),
);
} @override
void dispose() {
_pageController.dispose();
super.dispose();
}
}

Conclusion:

In the article, I have explained the actual construction of the Bottom Navy Bar widget in a flutter; you can alter this code as per your choice. This was a little introduction to the Bottom Navy Bar widget on User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide sufficient information on Trying up the Bottom Navy Bar widget in your flutter projects. We showed you what the Bottom Navy Bar widget is, and the properties of the Bottom Navy Bar widget. We made a demo program for working Bottom Navy Bar widget. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

GitHub Link:

find the source code of the bottom_navy_bar:

GitHub — flutter-devs/example_bottom_navy_bar
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Difference Between Manual and Automation Testing In Flutter

Shaiq Khan
-
0
Difference Between Manual and Automation Testing In Flutter

There are a few significant contrasts between manual testing and Automation testing. In manual testing, a human plays out the tests bit by bit, without test scripts. In Automated testing, tests are executed consequently by means of test automation structures, alongside different devices and programming.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

What is Manual Testing?

What is Automation Testing?

Manual Testing vs Automation Testing

Manual Testing Pros and Cons

Automated Testing Pros and Cons

Conclusion

What is Manual Testing?

Manual testing is testing of the software where tests are executed manually by a QA Analyst. It is performed to discover bugs in software under development.

In Manual testing, the tester checks all the essential features of the given application or software. In this process, the software testers execute the test cases and generate the test reports without the help of any automation software testing tools.

It is a classical method for all testing types and helps find bugs in software systems. It is generally conducted by an experienced tester to accomplish the software testing process.

What is Automation Testing?

In Automated Software Testing, testers write code/test scripts to automate test execution. Testers use appropriate automation tools to develop the test scripts and validate the software. The goal is to complete test execution in less amount of time.

Automated testing entirely relies on the pre-scripted test which runs automatically to compare actual results with the expected results. This helps the tester to determine whether or not an application performs as expected.

Automated testing allows you to execute repetitive tasks and regression tests without the intervention of a manual tester. Even though all processes are performed automatically, automation requires some manual effort to create initial testing scripts.

Manual Testing vs Automation Testing:

There are some differences between Manual Testing and Automation Testing are:

> Automation Testing:

  • Automation Testing uses automation tools to execute test cases.
  • Automated testing is significantly faster than a manual approach.
  • Automation does not allow random testing.
  • The initial investment in automated testing is higher. Though the ROI is better in the long run.
  • Automated testing is a reliable method, as it is performed by tools and scripts. There is no testing for Fatigue.
  • For even a trivial change in the UI of the AUT, Automated Test Scripts need to be modified to work as expected.
  • Investment is required for testing tools as well as automation engineers.
  • Not cost-effective for low-volume regression.
  • With automation testing, all stakeholders can log in to the automation system and check test execution results.
  • Automated testing does not involve human consideration. So it can never give assurance of user-friendliness and positive customer experience.
  • You can Batch multiple Test Scripts for nightly execution.
  • Programming knowledge is a must in automation testing.
  • Automation test requires a less complex test execution setup.
  • Automated Tests help in Build Verification Testing and are an integral part of the DevOps Cycle.
  • Automated Testing is suited for Regression Testing, Performance Testing, Load Testing, or highly repeatable functional test cases.

> Manual Testing:

  • In manual testing, test cases are executed by a human tester and software.
  • Manual testing is time-consuming and takes up human resources.
  • Exploratory testing is possible in Manual Testing.
  • The initial investment in Manual testing is comparatively lower. ROI is lower compared to Automation testing in the long run.
  • Manual testing is not as accurate because of the possibility of human errors.
  • Small changes like changes in id, class, etc. of a button wouldn’t thwart the execution of a manual tester.
  • Investment is needed for human resources.
  • Not cost-effective for high-volume regression.
  • Performance Testing is not feasible manually
  • Executing the Build Verification Testing (BVT) is very difficult and time-consuming in manual testing.
  • Manual Testing does not use frameworks but may use guidelines, checklists, and stringent processes to draft certain test cases.
  • Manual Unit Tests do not drive design into the coding process.
  • Manual Unit Tests do not drive design into the coding process.
  • Manual Testing is suitable for Exploratory, Usability, and Adhoc Testing. It should also be used where the AUT changes frequently.

Manual Testing Pros and Cons:

> Pros of Manual Testing:

  • Get fast and accurate visual feedback
  • It is less expensive as you don’t need to spend your budget on the automation tools and process
  • Human judgment and intuition always benefit the manual element
  • While testing a small change, an automation test would require coding which could be time-consuming. While you could test manually on the fly.

> Cons of Manual Testing:

  • Less reliable testing method because it’s conducted by a human. Therefore, it is always prone to mistakes & errors.
  • The manual testing process can’t be recorded, so it is not possible to reuse the manual test.
  • In this testing method, certain tasks are difficult to perform manually which may require additional time in the software testing phase.

Automated Testing Pros and Cons:

> Pros of automated testing:

  • Automated testing helps you to find more bugs compare to a human tester
  • As most of the part of the testing process is automated, you can have a speedy and efficient process
  • The automation process can be recorded. This allows you to reuse and execute the same kind of testing operations
  • Automated testing is conducted using software tools, so it works without tiring and fatigue unlike humans in manual testing
  • It can easily increase productivity because it provides fast & accurate testing result
  • Automated testing supports various applications
  • Testing coverage can be increased because of automation testing tools never forget to check even the smallest unit

> Cons of Automated Testing:

  • Without the human element, it’s difficult to get insight into visual aspects of your UI like colors, font, sizes, contrast, or button sizes.
  • The tools to run automation testing can be expensive, which may increase the cost of the testing project.
  • The automation testing tool is not yet foolproof. Every automation tool has its limitations which reduces the scope of automation.
  • Debugging the test script is another major issue in automated testing. Test maintenance is costly.

Conclusion:

In manual testing, there is a chance of human errors because here testing is done by humans. In automation testing, there is no chance of human errors because here testing is done by tools. In manual testing, there is a possibility of Exploratory testing. In automation testing, there is no permission for random testing

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Flutter 3.3 — What’s New In Flutter

Shaiq Khan
-
0
Flutter 3.3 — What’s New In Flutter

Google recently announced the release of the newly version of its cross platform mobile app development kit — Flutter 3.3

Flutter has merged 5,687 pull requests in bringing live the Flutter 3.3 bringing in more Material & Dart widgets , newly available renderer Impeller for speeding up the app performance and many more changes in the Inaugral day1 of the Community -Driven Conference Flutter Vikings serving the sole Focus on flutter & dart refinements & optimisation that strengthen performance . This update also introduces material 3 new components and scribble support without any-do to the ipad users , selectable text grouping , dart 2.18 including FFI support for libraries & code written in swift .

To get increased performance across desktop , web and mobile use

: flutter upgrade

Major Changes in the recent updated version are :

Global Selection

Flutter now provides the easiness of selecting the whole data in the web apps with a single sliding gesture by wrapping your widgets with SelectableArea widget. This not only provides richer & smoother control, but also lessen take amiss in certain places.

SelectableArea Widget

For a more deep dive into this awesome new feature, please visit the SelectableArea API page.

Wonderous: UI reference app

In order to show the world hidden capabilities of flutter UI Making , flutter team has developed the Wonderous app alongwith the gskinner team as an open- source project to exhibit flutter beautiful UI Experience showing the wonders of the world like Taj Mahal in the Indian city of Agra to the Mayan ruins of Chichén Itzá on the Yucatán peninsula of Mexico to your electronic devices using video & image representation to explore the perfect blended mixture of art, history & culture. The app is a visual delight along with some transient feature to look as a flutter developer including animations , performance techniques which would also be further shared by the team alongwith some generalisation and performant techniques in future weeks . For further news now and code navigate to the separate article here on the Flutter blog and respective playstores.

wonderous app built alongwith gskinner

Check this in github <Developers>

GitHub – gskinnerTeam/flutter-wonderous-app: A showcase app for the Flutter SDK. Wonderous will…
A showcase app for the Flutter SDK. Wonderous will educate and entertain as you uncover information about some of the…github.com

Check this in playstore

Wonderous – Apps on Google Play
Wonderous will educate and entertain as you uncover information about some of the most famous structures in the world…play.google.com

Impeller : New Graphic Engine

A new rendering engine as an experimental try out — Impeller is also available in this version replacing skia rendering engine having custom runtime to justify full use of modern hardware-accelerated graphics APIs such as Metal on iOS and Vulkan on Android delivering transient animation delivering faster refresh rate and eradicating the role of runtime shader compilation, main pain point of today’s apps making the scroll smooth. although it is still in production phase and a lot of optimisation is going on around for the same but it is available as a early preview in iOS.

Learn to enable it at : can be found on our wiki

Test it on the :Wonderous for iPhone from the Apple App Store

Report any issues, if found at :reproducible issue reports

Material Design Updates

Material updates now comes with many updates with mainly changes to chips , appbar & IconButton

These material widgets enhancement are not the default setting as now but you can opt-in to useMaterial3

Check this on github to know more about the updates

IconButton

Chip

Medium and large AppBar

Some Minor changes are :

Scribble

Scribbling is now supported by flutter 3.3 version as default by CupertinoTextField, TextField & EditableText. Flutter now supports Scribble handwriting input using Apple Pencil on iPadOS

contribution by : fbcouch

go_router

Navigation can turn head around in the app development process , flutter provide it’s own native navigation API ,go_router package a new version of this has been rolled out working seamlessly across mobile , desktop & web following a declarative approach enabling the package to easily navigate through deep links and redirect using asynchronous code in the migration guide available to view at the Navigation and routing page on flutter homepage .

Text input

Flutter now also provides the abiltiy to receive granular text updates from the platform’s TextInputPlugin which initially provides the new state with no delta b/w old and new , TextEditingDeltas and the DeltaTextInputClient fill this gap now. Having access to these deltas allows you to build an input field with styled ranges that expand and contract as you wite.

To Know more, Rich Text Editor demo.

VS Code extension enhancement

VS Code extensions now provides the flexibilty to app multiple dependencies in a go seperated by commas using Dart: Add Dependency.

KnowAbout the VS code extensions release after flutter 3 rollling out

DevTools Update

DevTools is undergoing major changes from the flutter 3 release including UX & optimisation to display tables for faster data , less hanged up scrolling of large lists of events .

Check Release Notes for devtools : Flutter DevTools 2.16.0 release notes

Windows

Currently the window desktop app verison was set by file specific to the window app itself making it inconsistent with the other platform setting their versioning now it can also be setup from the pubspec.yaml file and build arguments making auto updation easier for the customers to getting the latest version of app each time a new version is available

Raster cache improvements

Performance increase in image loading capabilities by elimation of copies and reducing Dart garbage collection (GC) pressure. Initially it was copied multiple times in order for it to compress to the native heap on opening and introducing to dart as a typed array and then second time to internal memory ui.ImmutableBuffer.

With the addition of ui.ImmutableBuffer.fromAsset, compressed image bytes can be loaded directly into the structure used for decoding. This approach requires changes to the byte loading pipeline of ImageProviders. This process lessen the time required to half as per our standards .

Check Adding ImageProvider.loadBuffer on flutter Homepage.

Raster Cache requirements

API improvements

PlatformDispatcher.onError

No further need to configure manually by creating a custom Zone to catch app errors & exceptions which slowed down application launch time . Now catch all errors and exceptions by setting the PlatformDispatcher.onError callback.

To Know More , check Handling errors in Flutter.

Changes To Supported Platform

32-bit iOS deprecation

Flutter will no longer be supporting the 32 bit iOS devices & iOS versions 9 &10 which would also mean that the further roll out will also not be supoorting same affecting iPhone 4S, iPhone 5, iPhone 5C, and the 2nd, 3d, and 4th generation iPad devices making some app not workable in such devices.

Bitcode deprecation

Bitcode will likely be eliminated and not acceptable for iOS app submission in the upcoming Xcode 14 release making it emit warning in build making in the current version , flutter would also drop support for bitcode in a future stable release.

Although it wont affect many developers as it is turned off default wise and not many developers usually enable it in their app project but if you do disable after migrating to Xcode 14.

See Apple’s documentation to learn more about bitcode distribution.

Bitcode depreciation

Summary

With the onset of 25,000 Flutter packages available for developers to choose among and the developers using them continue to publish more than 1,000 new apps to the Apple App and Google Play stores every day shows the community strength of flutter .Mainly, there is no such significant major updates that may appeal to your current projects but some solid performance improvements for apps .This new version has come up with some exciting features that will in turn be optimised by the community to make flutter drive in faster . Looking forward for each of the flutter developers to go through these new features.

Check out the launch on fluttervikings channel alongwith the whole playlist

For more on all the new features and improvements, check out the detailed Flutter 3.3 release notes and the Dart 2.18 announcement blog post.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

https://flutterdevs.com/

Explore Shimmer Animation Effect In Flutter

Shaiq Khan
-
0
Explore Shimmer Animation Effect In Flutter

Loading times are unavoidable in application improvement. From a user experience (UX) viewpoint, the main thing is to show your users that loading is occurring. One mainstream way to deal with imparting to users that information is loading is to show a chrome tone with a shimmer animation over the shapes that inexact the sort of substance that is loading.

In this blog, we will Explore Shimmer Animation Effect In Flutter. We will see how to implement a demo program of the shimmer animation effect and show a loading animation effect using the shimmer package in your flutter applications.

shimmer | Flutter Package
A package provides an easy way to add a shimmer effect in Flutter project import ‘package: shimmer/shimmer.dart’…pub.dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

What is the shimmer animation effect?

Properties

Implementation

Code Implement

Code File

Conclusion

What is the shimmer animation effect?:

Shimmer is utilized to add wonderful animations while content is loading from the servers in an application. This makes the UI look more responsive and gets users from leaving a sluggish internet collaboration. It very well may be utilized rather than traditional ProgressBar or usual loaders accessible in the Flutter structure.

Typically at whatever point we open an application then we see a loading impact with decent animation. It demonstrates that the application loading the information either from the server or the local database. There are numerous approaches to show this loading impact. In this, we generally animate the widget which precisely resembles the first widget in the wake of loading the information.

Demo Module :

This demo video shows how to create a shimmer animation effect in a flutter. It shows how the shimmer animation effect will work using the shimmer package in your flutter applications. It shows when code successfully runs, then shows content is loading from dummy data is shimmer animation effect with duration and then loading is complete then content will be shown on your devices.

Properties:

There are some properties of shimmer animation effect:

  • > baseColor: Base Color of the Shimmer that gets displayed on the Widget. This color is essential as the child widget will be of this color as it were.
  • > highlightColor: Highlight Color is the color that delivers the shimmer-like impact. This color continues to wave across the child widget and it makes the Shimmer impact.
  • > child: The Child holds whatever widget needs to create the ShimmerEffect. Could be a Text Widget or an intricate design and the ShimmerEffect is created with no issue.
  • > direction: You can adjust the direction of the shimmer highlight color from left to right, right to left, start to finish, or base to top, to do so you simply need to pass ShimmerDirection with a determined direction.
  • > period: It controls the speed of the shimmer effect. The default value is 1500 milliseconds.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

shimmer: ^3.0.0

Step 2: Import

import 'package:shimmer/shimmer.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called movie_model.dart inside the lib folder.

class MovieModel {
final String urlImg;
final String title;
final String detail;

const MovieModel({required this.urlImg,
required this.title,
required this.detail});
}

We will create a class MovieModel. In this class, we will create three final strings was urlImg, title, and detail. We also create a constructor of all strings items.

Create a new dart file called movie_data.dart inside the lib folder.

import 'package:flutter_shimmer_animation/model/movie_model.dart';

List<MovieModel> allMovies =[

MovieModel(
urlImg:'https://gumlet.assettype.com/bloombergquint%2F2019-04%2F4c894d41-181f-4c8c-8630-4604a6d51d05%2Favengers_infinity_war_and_endgame_poster_w7_1600x900.jpg?rect=0%2C0%2C1250%2C900&auto=format%2Ccompress&w=480&dpr=2.6',
title:'Avengers: Endgame',
detail:'It s a 2019 American superhero film based '
),
MovieModel(
urlImg:'https://townsquare.media/site/442/files/2014/08/The-Expendables.jpg?w=980&q=75',
title:'The Expendables 3',
detail:'The Expendables 3 is a 2014 American action '
),
MovieModel(
urlImg:'https://img.etimg.com/thumb/msid-71454408,width-650,imgsize-242226,,resizemode-4,quality-100/war-1.jpg',
title:'War',
detail:'War is a 2019 Indian Hindi-language action '
),
MovieModel(
urlImg:'https://iadsb.tmgrup.com.tr/de9f7e/1200/627/0/0/1000/522?u=https://idsb.tmgrup.com.tr/2019/12/22/1577016105167.jpg',
title:'Jumanji: The Next Level',
detail:'Jumanji: The Next Level is a 2019 American '
),
MovieModel(
urlImg:'https://evertise.net/wp-content/uploads/2021/06/image-366.png',
title:'Fast & Furious 9',
detail:'Dom Toretto`s peaceful life off the grid.'
)

];

In this dart file, we will create a list of movies. We will add five dummy data of MovieModel. We add five different data of urlImg, title, and detail.

Create a new dart file called custom_widget.dart inside the lib folder.

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class CustomWidget extends StatelessWidget {

final double width;
final double height;
final ShapeBorder shapeBorder;

const CustomWidget.rectangular({
this.width = double.infinity,
required this.height
}): this.shapeBorder = const RoundedRectangleBorder();

const CustomWidget.circular({
this.width = double.infinity,
required this.height,
this.shapeBorder = const CircleBorder()
});

@override
Widget build(BuildContext context) => Shimmer.fromColors(
baseColor: Colors.red,
highlightColor: Colors.grey[300]!,
period: Duration(seconds: 2),
child: Container(
width: width,
height: height,
decoration: ShapeDecoration(
color: Colors.grey[400]!,
shape: shapeBorder,

),
),
);
}

In CustomWidget will extend with StatelessWidget. Inside, we will add three final constructors was double width, double height, and shapeBorder. Create two custom widgets for rectangular() and circular(). In the build method, we will add Shimmer.fromColors(). Inside, we will add the base color was red, highlightColor was grey, and also add period. In child property, we will add Container. Inside, we will add width, height and add ShapeDecoration().

Create a new dart file called my_home_page.dart inside the lib folder.

First, we will create a List <MovieModel> movies is equal to bracket and bool isLoading is equal to false,

List<MovieModel> movies = [];
bool isLoading = false;

We will create an initState() method. In this method, we will add the loadData() method.

@override
void initState() {
// TODO: implement initState
super.initState();

loadData();
}

We will define loadData() method.

We will create a Future loadData() method. In this method, we will add setState() function. In this function, we will add isLoading is equal to true. Add an await future delay duration for loading and movies is equal to the list of (allMovies). Again, we will add setState() function. In this function, we will add isLoading is equal to false.

Future loadData() async {
setState(() {
isLoading = true;
});
await Future.delayed(Duration(seconds: 2));
movies = List.of(allMovies);
setState(() {
isLoading = false;
});
}

We will create a buildMovieList(). In this method, we will add ListTile() widget. In this widget, we will add leading. In this leading, we will create CircleAvatar with a radius is 30 and add backgroundImage as NetworkImage from MovieModel. Add a title, subtitle from the MovieModel list.

Widget buildMovieList(MovieModel model) =>
ListTile(
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(model.urlImg),
),
title: Text(model.title, style: TextStyle(fontSize: 16),),
subtitle: Text(
model.detail, style: TextStyle(fontSize: 14), maxLines: 1,),
)

We will create one more widget that was buildMovieShimmer(). In this method, we will add ListTile() widget. In this widget, we will add leading, title, subtitle from CustomWidget().

Widget buildMovieShimmer() =>
ListTile(
leading: CustomWidget.circular(height: 64, width: 64),
title: Align(
alignment: Alignment.centerLeft,
child: CustomWidget.rectangular(height: 16,
width: MediaQuery.of(context).size.width*0.3,),
),
subtitle: CustomWidget.rectangular(height: 14),
);

In the body part, we will add ListView.builder(). Inside, add itemCount and itemBuilder. In itemBuilder, we will add condition if isLoading then return buildMovieShimmer() widget else we will return final movie is equal to the movies[index] and return buildMovieList (movie);

ListView.builder(
itemCount: isLoading? 5: movies.length,
itemBuilder: (context, index) {
if (isLoading) {
return buildMovieShimmer();
} else {
final movie = movies[index];
return buildMovieList(movie);
}
}
),

When we run the code, first will show a shimmer effect when the data was loaded, we ought to get the screen’s output like the underneath screen capture.

Shimmer Animation Effect(Data loading)

When data successfully load, then shimmer was stopped and all data will show on your screen. We will also add a refresh button on an appBar() for the shimmer effect.actions:

 [
IconButton(
icon: Icon(Icons.refresh),
onPressed: loadData)
],

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Output

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_shimmer_animation/custom_widget.dart';
import 'package:flutter_shimmer_animation/data/movie_data.dart';
import 'package:flutter_shimmer_animation/model/movie_model.dart';

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
List<MovieModel> movies = [];
bool isLoading = false;

@override
void initState() {
// TODO: implement initState
super.initState();

loadData();
}
Future loadData() async {
setState(() {
isLoading = true;
});
await Future.delayed(Duration(seconds: 2));
movies = List.of(allMovies);
setState(() {
isLoading = false;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.teal,
title: Text("Shimmer Animation Effect"),
actions: [
IconButton(
icon: Icon(Icons.refresh),
onPressed: loadData)
],
),
body: ListView.builder(
itemCount: isLoading? 5: movies.length,
itemBuilder: (context, index) {
if (isLoading) {
return buildMovieShimmer();
} else {
final movie = movies[index];
return buildMovieList(movie);
}
}
),

);
}

Widget buildMovieList(MovieModel model) =>
ListTile(
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(model.urlImg),
),
title: Text(model.title, style: TextStyle(fontSize: 16),),
subtitle: Text(
model.detail, style: TextStyle(fontSize: 14), maxLines: 1,),
);

Widget buildMovieShimmer() =>
ListTile(
leading: CustomWidget.circular(height: 64, width: 64),
title: Align(
alignment: Alignment.centerLeft,
child: CustomWidget.rectangular(height: 16,
width: MediaQuery.of(context).size.width*0.3,),
),
subtitle: CustomWidget.rectangular(height: 14),
);

}

Conclusion:

In the article, I have explained the Shimmer Animation Effect basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Shimmer Animation Effect On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Shimmer Animation Effect in your flutter projects. We will show you what the Shimmer Animation Effect is?. Some shimmer animation effects properties, make a demo program for working Shimmer Animation Effect and It shows when code successfully runs, then shows content is loading from dummy data is shimmer animation effect with duration and then loading is complete then content will be shown on your devices. Show a loading animation effect using the shimmer package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Difference between Monkey and Gorilla Testing in Flutter

Shaiq Khan
-
0
Difference between Monkey and Gorilla Testing in Flutter

Hi everyone! today we explore the Difference between Monkey and Gorilla Testing in Flutter. Monkey testing is a type of random testing and no test cases are used in this testing. Gorilla Testing is manual testing and it is repetitively performed.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

Monkey Testing

Types of Monkey Testing:

Advantages of Monkey Testing:

Disadvantages of Monkey Testing

What is Gorilla Testing?

Monkey Testing V/s Gorilla Testing

Conclusion

Monkey Testing:

Monkey Testing is a software testing technique in which the tester enters any random inputs into the software application without predefined test cases and checks the behavior of the software application, whether it crashes or not. Monkey testing aims to find the software application’s bugs and errors using experimental techniques.

  • In Monkey Testing the tester (sometimes developer too) is considered as the ‘Monkey’
  • If a monkey uses a computer he will randomly perform any task on the system out of his understanding
  • Just like the tester will apply random test cases on the system under test to find bugs/errors without predefining any test case
  • In some cases, Monkey Testing is dedicated to Unit Testing or GUI Testing too

Types of Monkey Testing:

Monkey Testing is further divided into several categories according to its way of implementation, See the following diagram for a quick idea of it:

  • > Dumb Monkey: Testers have no idea about the system and its functionality, and also no assurance about the validity of the test case.
  • > Smart Monkey: Tester has a precise idea about the system its purpose and functionality. The tester navigates through the system and gives valid inputs to perform testing.
  • > Brilliant Monkey: Testers perform testing as per the user’s behavior and can specify some probabilities of bugs to have occurred.

Monkey Testing can also be performed for Android even. Monkey Testing may get more efficient with the use of tools. Even it can be used to find more bugs like other testing types. If we use a tool for Monkey Testing what could be the general process followed for it? Just have a quick look;

  • Like any other testing tool first step is to register your software with the dedicated server
  • Make sure you are well prepared with all the necessary references to build a test suite
  • Run the built test suit
  • ‘Monkey Test’ is the test log file that will be created to record test results
  • Keep in mind that the test will go on until the system comes to a crash point at which the action is recorded into a log file
  • Finally, the test report is shared with the concerned person and the test data can be stored and used for future reference

The process of Monkey Testing can be automated even with the use of tools but as it is some sort of new kind of testing introduced and not yet established on the industry level these tools have less identity, unlike others.

This situation may get changed with the coming era of the Testing Process then we will have look towards the upcoming impact of Monkey testing and its significant effect on industry standards. This is an introductory tutorial for Monkey Testing to cover basic ideas about it.

Advantages of Monkey Testing:

  • New kind of bugs: Tester can have total exposure to implementing tests as per his understanding apart from previously stated scenarios, which may give no. of new errors/bugs existing in the system.
  • Easy to execute: Arranging random tests against random data is an easy way to test the system
  • Less skilled people: Monkey Testing can be performed without skilled testers (but not always)
  • Less Costly: Requires considerably less amount of expenditure to set up and execute test cases

Disadvantages of Monkey Testing:

  • > No bug can be reproduced — As the tester performs tests randomly with random data reproducing any bug or error may not be possible.
  • > Less Accuracy — The tester cannot define an exact test scenario and even cannot guarantee the accuracy of test cases
  • > Requires very good technical expertise — It is not worth always compromising with accuracy, so to make test cases more accurate testers must have good technical knowledge of the domain
  • > Fewer bugs and time-consuming — This testing can go longer as there are no predefined tests and can find less number of bugs which may cause loopholes in the system

What is Gorilla Testing?

Gorilla Testing is a Software testing technique wherein a module of the program is repeatedly tested to ensure that it is working correctly and there is no bug in that module.

A module can be tested over a hundred times, and in the same manner. So, Gorilla Testing is also known as “Frustrating Testing”.

Monkey Testing V/s Gorilla Testing:

Monkey Testing is performed randomly with no specifically predefined test cases. It is neither predefined nor random. Monkey Testing is performed on the entire system and can have several test cases.

Gorilla Testing is performed on specifically a few selective modules with few test cases. The objective of Monkey Testing is to check for system crash Objective of Gorilla testing is to check whether the module is working properly or not.

Conclusion:

In the above article, we have discussed the critical difference between Monkey testing and Gorilla testing, and after seeing all the essential differences, we can conclude both the testing are the same because of the emphasis on randomly testing a given software under test.

Therefore, all the possible area is tested in contradiction to the requirement specifications. Both the Monkey and Gorilla testing approaches are action-centered software testing strategies to break the application or the software under test.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Difference Between Test Case and Test Scenario In Flutter

Shaiq Khan
-
0
Difference Between Test Case and Test Scenario In Flutter

Hi everyone! today we explore the Difference between Test Case and Test Scenario In Flutter. A test scenario is any potential capacity that may be tested, whereas a test case is a collection of operations performed to verify certain features or functionality. Test Cases are derived from test scenarios, whereas Test Scenarios are derived from test artifacts like BRS and SRS.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

What is the Test Case?

What is a Test Scenario?

Example of Test Scenario

KEY DIFFERENCE

Example of Test Cases

Why do we write Test Cases?

Why do we write Test Scenario?

Test case Vs Test scenario

Best practices for Creating Test Cases

Conclusion

What is the Test Case?

A test case is a series of operations carried out to validate a certain aspect or capability of your software program. A test case includes test procedures, test information, preconditions, and postconditions that were created for a particular test scenario to validate any requirement. The test case contains particular variables or conditions that a testing engineer might use to compare expected and actual outcomes to ascertain whether a software product is operating by client requirements.

What is a Test Scenario?

A Test Scenario is defined as any functionality that can be tested. It is a collective set of test cases that helps the testing team to determine the positive and negative characteristics of the project.

Test Scenario gives a high-level idea of what we need to test.

Example of Test Scenario:

For an eCommerce Application, a few test scenarios would be

  • > Test Scenario 1: Check the Search Functionality
  • > Test Scenario 2: Check the Payments Functionality
  • > Test Scenario 3: Check the Login Functionality

KEY DIFFERENCE:

  • A test Case is a set of actions executed to verify particular features or functionality whereas a Test Scenario is any functionality that can be tested.
  • Test Case is mostly derived from test scenarios while Test Scenarios are derived from test artifacts like BRS and SRS.
  • Test Case helps in exhaustive testing of an application whereas Test Scenario helps in an agile way of testing the end-to-end functionality.
  • Test Cases are focused on what to test and how to test while Test Scenario is more focused on what to test.
  • Test Cases are low-level actions whereas Test Scenarios are high-level actions.
  • Test Case requires more resources and time for test execution while Test Scenario requires fewer resources and time for test execution.
  • Test Case includes test steps, data, and expected results for testing whereas Test Scenario includes an end-to-end functionality to be tested.

Example of Test Cases:

Test cases for the Test Scenario: “Check the Login Functionality” would be

  1. Check system behavior when a valid email id and password are entered.
  2. Check system behavior when an invalid email id and valid password are entered.
  3. Check system behavior when a valid email id and invalid password are entered.
  4. Check system behavior when an invalid email id and invalid password are entered.
  5. Check system behavior when email id and password are left blank and Sign in entered.
  6. Check Forgot your password is working as expected
  7. Check system behavior when a valid/invalid phone number and password are entered.
  8. Check system behavior when “Keep me signed” is checked

Why do we write Test Cases?

Here, are some important reasons to create a Test Case-

  • Test cases assist in confirming compliance with relevant standards, directives, and client needs.
  • It helps you to validate expectations and customer requirements
  • Increased control, logic, and data flow coverage
  • You can simulate ‘real’ end-user scenarios
  • Exposes errors or defects
  • When test cases are written for test execution, the test engineer’s work will be organized better and simplified

Why do we write Test Scenario?

Here, are important reasons to create a Test Scenario:

  • The main reason to write a test scenario is to verify the complete functionality of the software application
  • It also helps you to ensure that the business processes and flows are as per the functional requirements
  • Test Scenarios can be approved by various stakeholders like Business Analysts, Developers, and Customers to ensure the Application Under Test is thoroughly tested. It ensures that the software is working for the most common use cases.
  • They serve as a quick tool to determine the testing work effort and accordingly create a proposal for the client or organize the workforce.
  • They help determine the most critical end-to-end transactions or the real use of the software applications.
  • Once these Test Scenarios are finalized, test cases can be easily derived from the Test Scenarios.

Test case Vs Test scenario:

Here, are significant differences between a Test scenario and a Test Case

Test Scenario contains high-level documentation which describes an end-to-end functionality to be tested. Test cases contain definite test steps, data, and expected results for testing all the features of an application.

It focuses on more “what to test” than “how to test”. A complete emphasis on “what to test” and “how to test”. Test scenarios are a one-liner. So, there is always the possibility of ambiguity during the testing. Test cases have defined a step, pre-requisites, expected result, etc. Therefore, there is no ambiguity in this process.

Test scenarios are derived from test artifacts like BRS, SRS, etc. A test case is mostly derived from test scenarios. Multiple Test cases can be derived from a single Test Scenario. It helps in an agile way of testing the end-to-end functionality and helps in exhaustive testing of an application test scenarios are high-level actions.

Test cases are low-level actions. Comparatively less time and resources are required for creating & testing using scenarios. More resources are needed for documentation and execution of test cases.

Best practices for Creating Test Cases:

There are some following Creating Test Cases are:

  • Test Cases should be transparent and straightforward
  • Create a Test Case by keeping the end user in the mind
  • Avoid test case repetition
  • Make sure you create test cases to verify all of the software requirements listed in the specification document.
  • When creating a test case, never assume the functioning and capabilities of your software application.
  • Test Cases ought to be easily recognizable

Best practices for creating a Test Scenario:

There are some following Creating Test Scenario are:

  • Test scenarios are mostly single line statement that tells what should be tested
  • The scenario description should be simple and easy to understand
  • The given needs should be carefully evaluated.
  • The required tools and resources for testing need to be accumulated before the beginning of the testing process.

Conclusion:

In this section, we have understood the essential differences and importance of both test cases and test scenarios. Using both the test case and test scenario together ensures robustness and high coverage testing creativity.

Because most IT businesses prefer Test Scenarios in the current Agile era, it is recommended to prepare Test Scenarios before writing Test Cases. The test case is being replaced with test scenarios in the agile period to save time.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Defect/Bug Life Cycle in Flutter

Shaiq Khan
-
0
Defect/Bug Life Cycle in Flutter

Hi everyone! today we explore the Defect / Bug life cycle In Flutter. The Defect Life Cycle, also known as the Bug Life Cycle, is a cycle of defects that it goes through covering the different states in its entire life. This starts as soon as any new defect is found by a tester and comes to an end when a tester closes that defect assuring that it won’t get reproduced again.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

What is Defect/Bug?

What is Defect Life Cycle?

Defect Status

Defect Life Cycle Explained

Tips to write a good bug report!

Good bug reports contain

Conclusion

What is Defect/Bug?

A defect is an error or a bug, in the application which is created. A programmer while designing and building the software can make mistakes or errors. These mistakes or errors mean that there are flaws in the software. These are called defects.

What is Defect Life Cycle?

Defect Life Cycle or Bug Life Cycle in software testing is the specific set of states that a defect or bug goes through in its entire life. The purpose of the Defect life cycle is to easily coordinate and communicate the current status of defects which changes to various assignees and makes the defect fixing process systematic and efficient.

Defect Status:

Defect Status or Bug Status in the defect life cycle is the present state from which the defect or a bug is currently undergoing. The goal of defect status is to precisely convey the current state or progress of a fault or bug to better track and understand the actual progress of the defect life cycle.

The number of states that a defect goes through varies from project to project. Below lifecycle diagram, covers all possible states

  • New: When a new defect is logged and posted for the first time. It is assigned a status as NEW.
  • Assigned: Once the bug is posted by the tester, the lead of the tester approves the bug and assigns the bug to the developer team
  • Open: The developer starts analyzing and works on the defect fix
  • Fixed: When a developer makes a necessary code change and verifies the change, he or she can make the bug status “Fixed.”
  • Pending retest: Once the defect is fixed the developer gives a particular code for retesting the code to the tester. Since the software testing remains pending from the tester’s end, the status assigned is “pending retest.”
  • Retest: The tester does the retesting of the code at this stage to check whether the defect is fixed by the developer or not and changes the status to “Re-test.”
  • Verified: The tester re-tests the bug after it got fixed by the developer. If there is no bug detected in the software, then the bug is fixed and the status assigned is “verified.”
  • Reopen: If the bug persists even after the developer has fixed the bug, the tester changes the status to “reopened”. Once again the bug goes through the life cycle.
  • Closed: If the bug no longer exists then the tester assigns the status “Closed.”
  • Duplicate: If the defect is repeated twice or the defect corresponds to the same concept of the bug, the status is changed to “duplicate.”
  • Rejected: If the developer feels the defect is not genuine then it changes the defect to “rejected.”
  • Deferred: If the present bug is not of a prime priority and if it is expected to get fixed in the next release, then the status “Deferred” is assigned to such bugs
  • Not a bug: If it does not affect the functionality of the application then the status assigned to a bug is “Not a bug”.

Defect Life Cycle Explained:

  • Tester finds the defect
  • The status assigned to defect- New
  • A defect is forwarded to the Project Manager for analyze
  • The project Manager decides whether a defect is valid
  • Here the defect is not valid- a status is given as “Rejected.”
  • So, the project manager assigns a status rejected. If the defect is not rejected then the next step is to check whether it is in scope. Suppose we have another function- email functionality for the same application, and you find a problem with that. But it is not a part of the current release when such defects are assigned as a postponed or deferred status.
  • Next, the manager verifies whether a similar defect was raised earlier. If yes defect is assigned a status duplicate.
  • If no the defect is assigned to the developer who starts fixing the code. During this stage, the defect is assigned a status in progress.
  • Once the code is fixed. A defect is assigned a status fixed
  • Next, the tester will re-test the code. In case, the test case passes the defect is closed. The defect is re-opened and assigned to the developer if the test cases fail again.
  • Consider a situation where during the 1st release of Flight Reservation a defect was found in the Fax order that was fixed and assigned a status closed. During the second upgrade release, the same defect again resurfaced. In such cases, a closed defect will be re-opened.

Tips to write a good bug report!:

One of the most important skills that you need to have in your tester’s toolbox is the ability to write a good bug report. Finding defects is only part of the job because if developers can’t reproduce the bugs you find, they will have a very tough time fixing them. Your bug tracking software should include several mandatory fields to ensure that testers give a complete account of the defect they encountered. And testers should hone their descriptive skills.

Good bug reports contain:

  • > Descriptive Title — Everything starts with a title. It must be clear and descriptive so that you get an idea of what it is about at a glance.
  • > Concise Description — Try to remain clear and concise in your description. Describing something accurately and concisely is a skill that develops with practice. Remember that the person reading your description has not seen the bug and try not to make assumptions.
  • > Expected Results — You have to make it clear what you expected to happen and how the defect diverged from that expectation. This field helps to prevent any misunderstandings, and it gives the developer a clear idea of what went wrong.
  • > Details about the project and version — It’s not unusual for testers to work on multiple projects at the same time, and sometimes they’ll share a database, so ensuring that your bug is listed in the correct project, and section within that project, is vital. You also need to get the software version right. Sometimes a bug will be fixed when a different defect is addressed, or simply by some change in the newest version of the software. If the version is wrong, developers may be embarking on a wild goose chase.
  • > Platform Details — Any background information you can provide about your environment will help developers track that bug down. What device were you using? What operating system was it running? What model was it? What browser did you use? Every detail you can give about the platform will help.

For Example Device Type, Model, Browser Version, and OS Version.

  • > Defect Type and Severity — These fields go hand-in-hand. A functional bug will generally be treated more seriously than a suggestion. Developers also need to know how severe the bug is. No product ships with zero defects, so having bugs categorized correctly in terms of type and severity helps the decision-making process about what gets fixed and what doesn’t. So it is always better to mention the Priority and Severity of the Bugs.
  • > Steps to Reproduce (this is very important!) — You want to give a step-by-step account of exactly what you did to find any defect. Sometimes you can use software tools that catch your keystrokes, or record screenshots or video files as you test, other times you will be writing from memory, so take notes as you go. Make sure that you test your steps again before submitting the bug.

Indicate reproducibility as well. Sometimes you’ll be confident about your steps, but upon repeating them the bug won’t necessarily occur. If it happens every time, at random, or only once, then the developer needs to know that.

  • > Visual Attachment — Supporting material is always gratefully received by those tasked with fixing defects. Usually, these will be screenshots, but they can include audio and video files. Keep in mind this is often what developers look at first, before reading the text you provided. If you can convey the issue in a single screenshot, you’re helping save precious time!
  • > Tags & Links — It can be a good idea to use descriptive tags that enable you to filter the database and find groups of related bugs. Sometimes you’ll want to include another bug ID or a link within your defect report to something that you feel is strongly related or similar, but not similar enough to be a duplicate.
  • > Assignee — It’s usually going to be up to the lead developer or management to assign bugs, but on occasion, you might receive instructions about who to assign them to. Leaving unassigned or wrongly assigned bugs in the database is a dangerous thing because they can potentially slip through the cracks. Make sure you’re clear on the expectations for assigning.
  • Put it all together — Bring all of this together and you should have a good bug report. If you’re uncertain about the quality of your bug reports ask for feedback. A quick chat with the developers can help you understand what they need.

Conclusion:

This is all about the Defect Life Cycle and Management. We hope you must have gained immense knowledge about the life cycle of a defect. This Blog will, in turn, help you while working with the defects in the future in an easy manner.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

BioMetric Authentication In Flutter Application

Shaiq Khan
-
0
BioMetric Authentication In Flutter Application

Hello Everyone! today my writing a blog about security or we can say privacy. In this blog, we learn how to add fingerprint authentication to our flutter application in a very easy way. As a developer, I think bio-metrics is very safe. In this blog, we learn how to implement BioMetric Authentication in Flutter Application.

For BioMetric Authentication, we need our local database by which we can check the fingerprint.

We use many types of bio-metric :

  • BiometricType.face
  • BiometricType.fingerprint
  • BiometricType.weak
  • BiometricType.strong

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents:

Implementation

Conclusion

GitHub Link

Implementation:

First, we have to create a new For BioMetric Authentication first we need to add dependencies in pubspec. ymal which is local_auth.dependencies:
local_auth: ^1.1.10

|> local_auth: This Flutter plugin gives the means to perform local, on-device user authentication. Import the following file into your StatefulWidget class.

import 'package:local_auth/local_auth.dart';

This includes authentication with biometrics such as fingerprint or facial recognition on supported devices. It supports Android, IOS, and Windows. For local_auth we have to check the capabilities of the device.

>Device capabilities: If we want to use Fingerprint Authentication we have to check the capability of our device for check the capability, we should call canCheckBiometrics()or isDeviceSupport()

import 'package:local_auth/local_auth.dart';
final LocalAuthentication auth = LocalAuthentication();
final bool canAuthenticateWithBiometrics = await auth.canCheckBiometrics;
final bool canAuthenticate = canAuthenticateWithBiometrics || await auth.isDeviceSupported();

canCheckBiometric() only designate whether hardware support is available, not whether the device has any biometrics enrolled. To get a list of enrolled biometrics, call getAvailableBiometrics().

This plugin will build and run on SDK 16+, but isDeviceSupported()will always return false before SDK 23.

> Dialogs:

The plugin provides default dialog’s for the following cases:

  1. Passcode/PIN/Pattern Not Set: The user has not yet configured a passcode on iOS or a PIN/pattern on Android.
  2. Bio-metrics Not Enrolled: The user has not enrolled in any biometrics on the device.
import 'package:local_auth/error_codes.dart' as auth_error;
    try {
      final bool didAuthenticate = await auth.authenticate(
          localizedReason: 'Please authenticate to show account balance',
          options: const AuthenticationOptions(useErrorDialogs: false));
    } on PlatformException catch (e) {
      if (e.code == auth_error.notAvailable) {
        // Add handling of no hardware here.
      } else if (e.code == auth_error.notEnrolled) {
      } else {}
    }

If you want to edit dialog, so you can pass AuthMessages for each platform in which you want to edit the message.

import 'package:local_auth_android/local_auth_android.dart';
import 'package:local_auth_ios/local_auth_ios.dart';
    final bool didAuthenticate = await auth.authenticate(
        localizedReason: 'Please authenticate to show account balance',
        authMessages: const <AuthMessages>[
          AndroidAuthMessages(
            signInTitle: 'Oops! Biometric authentication required!',
            cancelButton: 'No thanks',
          ),
          IOSAuthMessages(
            cancelButton: 'No thanks',
          ),
        ]);

>IOS Integration:

You need to add these lines in Info. plist file. Failure to do so results in a dialog that tells the user your app has not been updated to use Face ID.

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

>Android Integration:

  • If you are using FlutterActivity directly, change it to FlutterFragmentActivity in your AndroidManifest.xml.
  • If you are using a custom activity, update your MainActivity.java
import io.flutter.embedding.android.FlutterFragmentActivity;
  public class MainActivity extends FlutterFragmentActivity {
 }

or MainActivity.

import io.flutter.embedding.android.FlutterFragmentActivity
  class MainActivity: FlutterFragmentActivity() {
 }

we also permit using local_auth, add these lines in AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<manifest>

To check if local authentication is available on this device.

Future<void> _checkBiometric() async {
bool canCheckBiometric = false;

try {
canCheckBiometric = await auth.canCheckBiometrics;
} on PlatformException catch (e) {
print(e);
}

if (!mounted) return;
setState(() {
_canCheckBiometric = canCheckBiometric;
}
);
}

We create a final variable with the name auth in which we pass LocalAuthentication().

final auth = LocalAuthentication();

To get the list of enrolled biometrics on this device we create a list which is biometricType.

Future _getAvailableBiometric() async {
List<BiometricType> availableBiometric = [];

try {
availableBiometric = await auth.getAvailableBiometrics();
} on PlatformException catch (e) {
print(e);
}

setState(() {
_availableBiometric = availableBiometric;
});
}

Also create a String variable to inspect the biometric, whether it’s successful or unsuccessful. Then we create a method, and in the starting, we pass authenticated as false. and after that, we define authentication with biometrics.

And use the parameters of it, localizedReason in which we define the string, set useErrorDialogs as true, and also set stickyAuth as true. in this method, we also check whether the bio-metric is authenticated or not.

Future<void> _authenticate() async {
bool authenticated = false;
try {
authenticated = await auth.authenticateWithBiometrics(
localizedReason: "Scan your finger to authenticate",
useErrorDialogs: true,
stickyAuth: true);
} on PlatformException catch (e) {
print(e);
}
setState(() {
authorized =
authenticated ? "Authorized success" : "Failed to authenticate";
print(authorized);
});
}

After creating all these methods, call these methods to initState().

@override
void initState() {
_checkBiometric();
_getAvailableBiometric();

super.initState();
}

Let’s come to UI part, In UI part return the scaffold in buildContext. add gave the background color of the Screen. In the body of the Scaffold pass Column(), take text as children,

and pass Login text. Create a FloatingActionButton and pass _authenticate at onPressed.

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey.shade600,
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 48.0,
fontWeight: FontWeight.bold,
),
),
),
Container(
margin: const EdgeInsets.symmetric(vertical: 50.0),
child: Column(
children: [
Container(
margin: const EdgeInsets.symmetric(
vertical: 15.0),
child: const Text(
"Authenticate using your fingerprint instead of
your password",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white,
height: 1.5),
),
),
Container(
margin: const EdgeInsets.symmetric(
vertical: 15.0),
width: double.infinity,
child: FloatingActionButton(
onPressed: _authenticate,
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 24.0, vertical: 14.0),
child: Text(
"Authenticate",
style: TextStyle(color: Colors.white),
),
),
),
)
],
),
)
],
),
),
);
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Final Output

Conclusion:-

In this article, we have been through why Bio-metric is important and how to implement this in any Flutter Project. And also learn the importance of local_auth and how many types of Bio-metric are in this package.

❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

GitHub Link:

Find the source code of the Fingerprint Authentication In Flutter Application :

GitHub – flutter-devs/biometric_authentication_flutter
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

1...656667...73Page 66 of 73

EDITOR PICKS

POPULAR POSTS

PAGES

About

Disclaimer

Terms & Conditions

Privacy Policy

Contact

ABOUT US

FlutterExperts are here to share their Flutter knowledge with the developer community.

Contact us: info@flutterexperts.com

FOLLOW US

© Copyright 2024 FlutterExperts. All Rights Reserved.