Google search engine
Home Blog Page 535

Form Validation with Stream BloC and RxDart

Shaiq Khan
-
0
Form Validation with Stream BloC and RxDart

In this article, we will explore the Form Validation with Stream BloC and RxDart. We will also implement a demo program and learn how to implement it in your flutter applications.

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.

Introduction:

First of all, I would like to introduce you to Validation with Stream BloC and RxDart.

RxDart:

RxDart is an implementation of the popular reactive API for asynchronous programming, leveraging the native Dart Streams API. Changelog.

FlutterBloC:

Flutter Widgets that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with the bloc state management package. Widgets that make it easy to integrate blocs and cubits into Flutter. Built to work with package: bloc.

Implementation:

Let’s see how to Implement the form validation with stream bloc.

First Add these two dependencies in pubsec.yaml file

dependencies:
flutter_bloc: ^8.0.1
rxdart: ^0.27.3

Alright, now we will work on our stream part for this. First of all, we will create a new file and call it login_bloc_state.dart

part of 'login_bloc_cubit.dart';

abstract class LoginBloc {}

class LoginInitial extends LoginBloc {}

Secondly, we will create the login_bloc_cubit.dart file

Behavior Subject:
The BehaviorSubject is, by default, a broadcast (aka hot) controller, to fulfill the Rx Subject contract. This means the Subject’s stream can listen to multiple times.

Rx.combineLatest:
Merges the specified observable sequences into one observable sequence by using the selector function whenever any of the observable sequences produces an element. Observables need to be an array. If the result selector is omitted, a list with the elements will be yielded.

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:rxdart/rxdart.dart';
part 'login_bloc_state.dart';
class LoginScreenCubit extends Cubit<LoginBloc> {
LoginScreenCubit() : super(LoginInitial());
final _userNameController = BehaviorSubject<String>();
final _passwordController = BehaviorSubject<String>();
Stream<String> get userNameStream => _userNameController.stream;
Stream<String> get passwordStream => _passwordController.stream;

void clearStreams() {
updateUserName('');
updatePassword('');
}

void updateUserName(String userName) {
if (userName.length < 4) {
_userNameController.sink.addError("Please enter at least 4 characters of your name here");
} else {
_userNameController.sink.add(userName);
}
}

void updatePassword(String password) {
if (password.length < 4) {
_passwordController.sink.addError("Please enter at least 4 character of the password here");
} else {
_passwordController.sink.add(password);
}
}

Stream<bool> get validateForm => Rx.combineLatest2(
userNameStream,
passwordStream,
(a, b,) => true,
);
}

Note: You can learn more about behavior subjects over here

Setup Bloc Providers file:-

import 'package:flutter_bloc/flutter_bloc.dart';

import 'bloc/login_bloc_cubit.dart';

List<BlocProvider> blocProviders = [
BlocProvider<LoginScreenCubit>(create: (context) => LoginScreenCubit()),
];

Setup main.dart file:-

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

import 'bloc_providers.dart';
import 'login_screen.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: blocProviders,
child: const MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
),
);
}
}

Finally, we will design Login Screen UI:

Wrap TextFormField with StreamBuilder widget and provide stream to it.Invoke validator function from on Changed callback of TextFormField.

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

import 'bloc/login_bloc_cubit.dart';
import 'custom_widgets/custom_plain_button.dart';
import 'custom_widgets/custom_text_field.dart';

class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);

@override
State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
LoginScreenCubit? _loginScreenCubit;

@override
void initState() {
WidgetsBinding.instance?.addPostFrameCallback((_) {
_loginScreenCubit?.clearStreams();
});
super.initState();
}

@override
Widget build(BuildContext context) {
_loginScreenCubit = BlocProvider.of<LoginScreenCubit>(
context,
listen: false,
);
return Scaffold(
appBar: AppBar(
title: const Text('Validation with BloC'),
),
backgroundColor: Colors.white,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
child: Column(
children: [
Expanded(child: _buildMiddleView()),
_buildBottomButtonView()
],
),
),
),
);
}

_buildMiddleView() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Login In',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
const SizedBox(
height: 10,
),
StreamBuilder(
stream: _loginScreenCubit?.userNameStream,
builder: (context, snapshot) {
return CustomTextField(
onChange: (text) {
_loginScreenCubit?.updateUserName(text);
},
labelText: 'Username',
textInputType: TextInputType.emailAddress,
);
}),
const SizedBox(
height: 10,
),
StreamBuilder(
stream: _loginScreenCubit?.passwordStream,
builder: (context, snapshot) {
return CustomTextField(
onChange: (text) {
_loginScreenCubit?.updatePassword(text);
},
labelText: 'Password',
textInputType: TextInputType.text,
isObscureText: true,
);
}),
const SizedBox(
height: 10,
),
],
);
}

_buildBottomButtonView() {
return StreamBuilder(
stream: _loginScreenCubit?.validateForm,
builder: (context, snapshot) {
return CustomPlainButton(
isEnabled: snapshot.hasData,
btnColor: snapshot.hasData ? Colors.red : Colors.grey,
height: 67,
onTap: snapshot.hasData ? _loginBtnTap : null,
label: 'Log in',
lblColor: Colors.white,
);
},
);
}

_loginBtnTap() {
print('Login Button Pressed');
}
}

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

Output
  • > Wrap TextFormField with StreamBuilder widget and provide stream to it:
    StreamBuilder has 2 required parameters, stream and builder callback. StreamBuilder will listen to the provided stream and the builder function will facilitate us to build the UI accordingly.
StreamBuilder(
stream: _loginScreenCubit?.passwordStream,
builder: (context, snapshot) {
return CustomTextField(
onChange: (text) {
_loginScreenCubit?.updatePassword(text);
},
labelText: 'Password',
textInputType: TextInputType.text,
isObscureText: true,
);
}),
  • > Invoke validator function from on Changed callback of TextFormField:

We’ll utilize the on Changed callback of TextFormField and invoke the validator method.

onChange: (text) {
_loginScreenCubit?.updatePassword(text);
},

Then, we will Making button enabled or Disable

We will use RxDart’s combined latest function to check if both streams have data, as a boolean, and again send it as a stream, to be able to utilize it to make the button enabled.

The new stream will emit true when we have passed all the validations by checking if both the streams have data and none has an error with it.

Stream<bool> get validateForm => Rx.combineLatest2(
userNameStream,
passwordStream,
(a, b,) => true,
);

Connecting the resultant stream to the button

Wrap the button with stream builder and provide the combined stream in the stream property.

StreamBuilder(
stream: _loginScreenCubit?.validateForm,
builder: (context, snapshot) {
return CustomPlainButton(
isEnabled: snapshot.hasData,
btnColor: snapshot.hasData ? Colors.red : Colors.grey,
height: 67,
onTap: snapshot.hasData ? _loginBtnTap : null,
label: 'Log in',
lblColor: Colors.white,
);
},
);

For making the button be enabled according to the validations, we will use the stream snapshots has data property to check if it has data and connects it to the buttons onTap property so that if it doesn’t have data we will set it onTap property to null, making button disabled.

onTap: snapshot.hasData ? _loginBtnTap : null,

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

Output

❤ ❤ 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 validation_with_stream_bloc:

GitHub – flutter-devs/validation_with_stream_bloc
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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Exploration Of Unit Testing In Flutter

Shaiq Khan
-
0
Exploration Of Unit Testing In Flutter

In this article, we will explore the Unit Testing in Flutter. How unit testing works, how we create the class and how the outcomes appear in your project.

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

Steps

Run tests using IntelliJ or VSCode

Run tests in a terminal

Why is unit testing important?

Unit test example

Conclusion

So let’s start with it.

An introduction to Unit Testing:

Unit testing is a software testing technique by which individual units of source code sets of at least one computer program module along with related control information, use procedures, and operating methodology — are tested to decide if they are fit for use. Unit tests are commonly automated tests composed and run by software developers to guarantee that an application meets its plan and acts as intended.

In software testing, unit testing is a strategy for testing more isolated portions (or units) of code. Unit tests are generally directed with test automation scripts on the smallest testable portion of the software.

The unit is usually a function of the code. It is also a part of “white box testing,” which is a type of testing that can be written by someone who knows the architecture of the program.

This methodology can test code functions, strategies, or methods whether using procedural programming or object-oriented programming. If it depends on or converses with some other frameworks, it can’t be qualified as unit testing. The object is to guarantee that every unit of code functions true to form. This takes into consideration quality confirmation to write test cases just for bits of the software that influence the way of behaving of the framework.

Unit tests are handy for verifying the behavior of a single function, method, or class. The test package provides the core framework for writing unit tests, and the flutter_test package provides additional utilities for testing widgets.

Steps:

This recipe demonstrates the core features provided by the test package using the following steps:

  • Add the test or flutter_test dependency.
  • Create a test file.
  • Create a class to test.
  • Write a test for our class.
  • Combine multiple tests in a group.
  • Run the tests.

> Add the test dependency:

The test package provides the core functionality for writing tests in Dart. This is the best approach when writing packages consumed by web, server, and Flutter apps.

dev_dependencies:
  test: <latest_version>

> Create a test file:

In this example, create two files: counter.dart and counter_test.dart.

The counter.dart file contains a class that you want to test and resides in the lib folder. The counter_test.dart file contains the tests themselves and lives inside the test folder.

In general, test files should reside inside a test folder located at the root of your Flutter application or package. Test files should always end with _test.dart, this is the convention used by the test runner when searching for tests.

When you’re finished, the folder structure should look like this:

counter_app/
  lib/
    counter.dart
  test/
    counter_test.dart

> Create a class to test:

Next, you need a “unit” to test. Remember: “unit” is another name for a function, method, or class. For this example, create a Counter class inside the lib/counter.dart file. It is responsible for incrementing and decrementing a value starting at 0.class Counter {
int value = 0; void increment() => value++; void decrement() => value–;

> Write a test for our class:

Inside the counter_test.dart file, and write the first unit test. Tests are defined using the top-level test function and you can check if the results are correct by using the top-level expect function. Both of these functions come from the test package.

// Import the test package and Counter class
import 'package:test/test.dart';
import 'package:counter_app/counter.dart';void main() {
test('Counter value should be incremented', () {
final counter = Counter(); counter.increment(); expect(counter.value, 1);
});
}

> Combine multiple tests in a group:

If you have several tests that are related to one another, combine them using the group function provided by the test package.

import 'package:test/test.dart';
import 'package:counter_app/counter.dart';void main() {
group('Counter', () {
test('value should start at 0', () {
expect(Counter().value, 0);
}); test('value should be incremented', () {
final counter = Counter(); counter.increment(); expect(counter.value, 1);
}); test('value should be decremented', () {
final counter = Counter(); counter.decrement(); expect(counter.value, -1);
});
});
}

> Run the tests:

Now that you have a Counter class with tests in place, you can run the tests.

Run tests using IntelliJ or VSCode:

The Flutter plugins for IntelliJ and VSCode support running tests. This is often the best option while writing tests because it provides the fastest feedback loop as well as the ability to set breakpoints.

  • > IntelliJ:-
  • Open the counter_test.dart file
  • Select the Run menu
  • Click the Run 'tests in counter_test.dart' option
Alternatively, use the appropriate keyboard shortcut for your platform.
  • > VSCode:-
  • Open the counter_test.dart file
  • Select the Run menu
  • Click the Start Debugging option
  • Alternatively, use the appropriate keyboard shortcut for your platform.

Run tests in a terminal:

You can also use a terminal to run the tests by executing the following command from the root of the project:

flutter test test/counter_test.dart

For more options regarding unit tests, you can execute this command:

flutter test --help

Why is unit testing important?:

Unit testing is very important as it allows developers to detect bugs earlier in the lifecycle- thus improving the quality of delivered software. Here is a list of great benefits:

  • > This methodology can reduce the overall impact on testing costs as bugs are caught in the early phases of development.
  • > It allows better refactoring of code as it is more reliable code.
  • > This practice also conditions developers to rethink how they code. Meaning, coding modular components that can be mocked if they do have dependencies.
  • > Tests can be automated, which is extremely beneficial when maintaining code at scale.
  • > Overall, it improves the quality of the code.

In DevOps, the process of continuous integration automatically runs tests against the code every time someone commits new code to the repository. If one test fails, the entire team can receive an email (or alert on Slack) of the break. Then the responsible person can rectify the issue.

Unit test example:

Here is a simple example of how to write unit tests.

Let’s say we’re trying to implement the sum function. It takes two numbers a and b as its arguments and returns the number of the total amount.

def sum(a, b):
  return a + b

The simplest way to write a unit test is by using the assert function. This function can be found in most programming languages.

# It should pass
assert sum(1, 2) == 3
# It also should pass
assert sum(1, 2) != 0

Conclusion:

If you are performing automated tests consistently, you can see how beneficial unit testing is for catching bugs early on. Without this technique, a defect could make its way farther into the pipeline. Even worse, into production.

This means time and resources are allocated to finding, analyzing, and fixing defects when a simple automated test could have caught them. If your firm seeks a test automation tool to automatically catch bugs and alert developers via Slack.

❤ ❤ 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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

CupertinoPageTransition In Flutter

Shaiq Khan
-
0
CupertinoPageTransition In Flutter

Whenever you will code for building anything in Flutter, it will be inside a widget. The central design is to build the application out of widgets. It portrays how your application view ought to look with its current design and state. Right when you made any adjustment in the code, the widget alters its depiction by working out the differentiation between the past and current widget to choose the immaterial changes for conveying in the UI of the application.

In Flutter, to build any application, we start with widgets. The construction block of flutter applications. Widgets portray what their view should look like given their current setup and state. It consolidates a text widget, line widget, segment widget, container widget, and some more.

Navigating between routes is very quite default. Flutter benevolently gives you the MaterialPageRoute and CupertinoPageRoute classes and, while their transition animations don’t look awful, there’s surely something more we can do.

In this article, we will explore the CupertinoPageTransition In Flutter. We will implement the Cupertino page transition demo program and learn how to use the same in your flutter applications.

CupertinoPageTransition class – cupertino library – Dart API
API docs for the CupertinoPageTransition class from the Cupertino Library, for the Dart programming language.api.flutter.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::

Cupertino Page Transition

Constructor

Properties

Code Implement

Code File

Conclusion

GitHub Link

CupertinoPageTransition:

It is a widget that provides an iOS-style page transition animation. The page slides in from the right and exits backward. It likewise moves to one side in a parallax motion when another page enters to cover it.

Demo Module :

This demo shows how the transition works in an app. It shows how the page transitions from right to left just like your transition to another page on a device running on iOS/Android.

Constructor:

To utilize CupertinoPageTransition, you need to call the constructor underneath:

CupertinoPageTransition({
Key key,
@required Animation<double> primaryRouteAnimation,
@required Animation<double> secondaryRouteAnimation,
@required Widget child,
@required bool linearTransition,
});

In Above Constructor all fields marked with @required must not be empty.

Properties:

There are some properties of CupertinoPageTransition:

  • > Widget Child: The widget below this widget in the tree. Child Property will have only one child.
  • > Animation<double> primaryRouteAnimation: primaryRouteAnimation is a linear route animation from 0.0 to 1.0 when this screen is being pushed.
  • > Animation<double> secondaryRouteAnimation: secondaryRouteAnimation is a linear route animation from 0.0 to 1.0 when another screen is being pushed on top of this one.
  • > bool linearTransition: linear transition is whether to perform the transitions linearly. Used to precisely trackback gesture drags.

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 will make a screen that will show the underlying page and a picture in the center that has an on-tap function which will set off the transition. Then we will make a subsequent page and set it up with another picture, then we want to set up a route style which will be the Cupertino page transition widget.

Center(
child: InkWell(
onTap: () => Navigator.of(context).push(PageTwo.route()),
child: Image.asset('assets/pencil.png'),
),
),

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

Initial Screen

With the help of this route property, we will transact from the initial page to the final page with a transition style straight from iOS.

static Route<dynamic> route() {
return CupertinoPageRoute(
builder: (BuildContext context) {
return const PageTwo();
},
);
}

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

Final Output

Code File:

import 'package:flutter/cupertino.dart' show CupertinoPageRoute;
import 'package:flutter/material.dart';

void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
),
);
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Flutter CupertinoPageTransition Demo'),
backgroundColor: Colors.teal,
),
body: Center(
child: InkWell(
onTap: () => Navigator.of(context).push(PageTwo.route()),
child: Image.asset('assets/pencil.png'),
),
),
);
}
}

class PageTwo extends StatelessWidget {
const PageTwo({Key? key}) : super(key: key);

static Route<dynamic> route() {
return CupertinoPageRoute(
builder: (BuildContext context) {
return const PageTwo();
},
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Image.asset('assets/logo.png'),
),
);
}
}

Conclusion:

In the article, I have explained the essential construction of the CupertinoPageTransition widget in a flutter; you can alter this code as indicated according to your choice. This was a little prologue to the CupertinoPageTransition widget on User Interaction from my side, and its functioning utilizing Flutter.

I hope this blog will provide you with sufficient information on Trying up the CupertinoPageTransition widget in your flutter projects. We showed you what the CupertinoPageTransition widget is?, its constructor, and the properties of the CupertinoPageTransition widget. We made a demo program for working CupertinoPageTransition widget, and it shows transitions directly from the iOS/Android in your flutter application. 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 thecupertino_page_transition:

GitHub – flutter-devs/cupertino_page_transition
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.

Related: Show/Hide Password Using Riverpod In Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Flutter App for Web

Shaiq Khan
-
0
Flutter App for Web

Hello everyone! This is my first project on Flutter Web. Today we learn about how to create web applications using Flutter. For more understanding, we create a demo on Flutter Web.

Flutter’s web help develops applications that are wealthy in intuitive content. Web helps for Flutter gives a browser-based conveyance model for Flutter mobile applications. Flutter renders web applications similarly as it will deliver your android/iOS applications. It likewise converts your project over completely to native code (HTML, CSS, JS) when you wish to deploy.

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:

Requirements For Flutter Web App

Important’s of Flutter Web

How is the performance for Flutter Web and how it is different

Set Up For Flutter Web App

Implementation

Conclusion

GitHub Link

Requirements For Flutter Web App:

We have some important requirements for creating any Flutter Web App.

  • > Flutter SDK. See the Flutter SDK installation instructions.
  • > Chrome; debugging a web app requires the Chrome browser.
  • > Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.

Important’s of Flutter Web:

Some important points of flutter web:

  • > Users can open your website in any screen size, you need to make it responsive.
  • > Many packages that bear the web, but always examine the supported platforms before coding.
  • > If you are from a web development background and if you perceive to make any changes in native code, you are highly welcome to do so. You can replace the native code the same way we can change it for Android and iOS.
  • When you want to deploy your web app, you can simply run:
flutter build web

How is the performance for Flutter Web and how it is different:

  • > FlutterWeb works in appealing smooth contrast to native as it creates only a single page and hence generates less cargo on the browser.
  • > With the help of Flutter, you can create some great animations very easily compared to native, hence making your web app more beautiful, and it is very useful for complex web applications.
  • > Flutter Web directly bear installing your website as a unfasten application (Web-App) for which you require to individually code if in native.
  • > Flutter, as it is a cross-platform framework, you can add some platform-specific code without any configuration changes by which we can apply many new things to our web application.

Set Up For Flutter Web App:

  • > First, we have to create a flutter project and choose the web platforms in android studio. We choose android, Ios, and Web. if we want to create an app for Linux, Windows, or Mac OS so we have to select these options
  • > Then, we have to check the flutter channel, for Flutter Channel we use channel beta if your flutter channel is different then you have to change the channel to beta by using this command.
$ flutter channel beta
  • > After changing the channel we have to upgrade the version of flutter by using this command.
$ flutter upgrade
  • > When we change the channel and also upgrade the flutter we have to config or enable the web to run the flutter web app. After running this command we have to restart the Android Studio and run the project on chrome or any other browser.
$ flutter config --enable-web
  • > After running this command we have to restart the android studio. when its opens we find a new folder whose name is the web. In the web folder we find many files like index.html, manifest.json, and also find a folder with the name of icons.

We can start our coding part to create a better Flutter Web Application.

Implementation:

Now we create a Flutter Web Application. Give the name of the application is flutter_web_demo. In main. dart we pass the MyApp() class in the runApp() and create a stateless class with the name of MyApp() and return MaterialApp in the context and pass the new class whose name is HomePage.

return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
);

In the HomePage class we return the Scaffold and use the properties of the scaffold, in the app-bar we pass the title of the page.

appBar: AppBar(
backgroundColor: Colors.black,
centerTitle: true,
title: const Text('Flutter Web App',
style: TextStyle(
color: Colors.white
),),
),

And create a button in the center of the page. Add a text at the button which is “click me” and by using the GestureDetector() we can tap on the button and go to the new page, which is the second page of the application. On tap, we navigate the screen to a new page by using Navigator. push().

GestureDetector(
onTap: (){
Navigator.push(context,
MaterialPageRoute(builder: (context)=> const NewScreen()));
},
child: Container(
height: 50,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black,
),
child: const Center(child: Text('CLICK ME!!!',
style: TextStyle(
color: Colors.white
),)),
),
),

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

Output

In the new screen whose class name is NewScreen(), we return Scaffold and pass text in the body of it.

return const Scaffold(
body: Center(child: Text('Welcome to Flutter Web App...',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 30,
fontWeight: FontWeight.w500,
color: Colors.teal
),)),
);

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

Output

Conclusion:

I hope you like my article. Flutter web is extremely useful for web developers and also for app developers. Because of this, we don’t need to learn HTML, CSS, or JS. There are many browsers like Chrome, Safari, Edge and Firefox, Chrome (on Windows, macOS, and Linux), and Edge (on Windows).

❤ ❤ 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 Implementing Flutter App for Web

GitHub – flutter-devs/flutter_web_demo
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.

Related: SMS Using Twilio In Flutter

Related: Using SharedPreferences in Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

How to Validation with Bloc in Flutter 2026

Shaiq Khan
-
0
How to Validation with Bloc in Flutter 2026

Hello Everyone! In this article, we learn about Bloc in Flutter. we cover many topics of the bloc like Bloc Widgets, Bloc Builder, Bloc Selector, Bloc Provider, Multi Bloc Provider, Bloc Listener, Multi Bloc Listener, etc…

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 Bloc?

Bloc Widgets

Implementation

Conclusion

GitHub Link

What Is Bloc?

Flutter Bloc is one of the state management in a flutter. We can use it to handle all the states which we want to perform in our flutter applications.

Bloc is the best and simple way to do state management. We can easily add any type of change to the Flutter application. You can easily learn the concept, no matter what’s your level. You can add this dependency to your project and use it.

Bloc is a design pattern created by Google to help separate business logic from the award layer and authorize a developer to exploit code more efficiently.

A state management library called Bloc was created and maintained by Felix Angelo. It assists developers utensil the Bloc design pattern in their Flutter application. It means that a developer must recognize the state of an app at some time. There should be something exhibited on the screen for every interplay with the app to let users know what is incident.

Bloc Widgets

There are many Wiglets in Flutter Bloc:

> Bloc Builder:

Bloc-builder is a Flutter widget that needs a bloc and a builder function. Bloc-builder holds building the widget in response to new states. Bloc-builder is very alike to Stream-builder but has a more simple API to decrease the quantity of boilerplate code needed. The builder function will potentially be called many times and should be an unalloyed function that returns a widget in reaction to the state.

BlocBuilder<BlocA, BlocAState>(
  builder: (context, state) {
    // return widget here based on BlocA's state
  }
)

> Bloc Selector:

Bloc-selector is a Flutter widget that is comparable to BlocBuilder but permits developers to filter modernize by selecting a new worth based on the contemporary bloc state. dispensable builds are averted if the selected value does not switch. The pick value must be fixed for Bloc Selector to correctly control whether the builder should be called again.

BlocSelector<BlocA, BlocAState, SelectedState>(
  selector: (state) {
    // return selected state based on the provided state.
  },
  builder: (context, state) {
    // return widget here based on the selected state.
  },
)

> Bloc Provider:

Bloc Provider is a Flutter widget that provides a bloc to its children via BlocProvider.of<T>(context). It is worn as a dependency injection (DI) widget to bestow a lone instance of a bloc to beau-coup widgets within a sub-tree.

BlocProvider(
  create: (BuildContext context) => BlocA(),
  child: ChildA(),
);

> MultiBlocProvider:

Multi Bloc Provider is a Flutter widget that amalgamates multiple Bloc Provider widgets into one. MultiBlocProvider better the readability and removes the need to nest multipleBlocProviders.

BlocProvider<BlocA>(
  create: (BuildContext context) => BlocA(),
  child: BlocProvider<BlocB>(
    create: (BuildContext context) => BlocB(),
    child: BlocProvider<BlocC>(
      create: (BuildContext context) => BlocC(),
      child: ChildA(),
    )
  )
)

> Bloc Listener:

Bloc Listener is a Flutter widget that clasps a BlocWidgetListener and a voluntary bloc and invokes the listeners in response to state swap in the bloc. It should be worn for functionality that needs to happen once per state change such as navigation, showing a Snack-bar, showing a Dialog, etc…

BlocListener<BlocA, BlocAState>(
  listener: (context, state) {
    // do stuff here based on BlocA's state
  },
  child: Container(),
)

> Multi Bloc Listener:

Multi Bloc Listener is a Flutter widget that amalgamates multiple BlocListener widgets into one. MultiBlocListener better the readability and eliminates the requirement to nest multipleBlocListeners. By utilizing multipleBlocListener we can go from:

BlocListener<BlocA, BlocAState>(
  listener: (context, state) {},
  child: BlocListener<BlocB, BlocBState>(
    listener: (context, state) {},
    child: BlocListener<BlocC, BlocCState>(
      listener: (context, state) {},
      child: ChildA(),
    ),
  ),
)

Implementation:

First, we have to add dependency in pubspec.ymal file for getting all the properties of the bloc by which we can easily use it for state management.

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
rxdart: ^0.27.3
flutter_bloc: ^8.0.1

We use two dependencies flutter_bloc and rxdart. RxDart extends the capabilities of Dart Streams and Stream-controllers. Flutter_bloc uses Bloc Provider to provide a Counter-cubit to a Counter-Page and react to state changes with BlocBuilder.

First, we have to create a cubit class(login_bloc_cubit.dart) for the app which is an abstract class Cubit extends Bloc-base. We create the class by the name LoginScreenCubit(). In this class first, we have to define the argument constructor. After that, we define all the controllers which we used.

LoginScreenCubit() : super(LoginInitial());

//define controllers
final _userNameController = BehaviorSubject<String>();
final _passwordController = BehaviorSubject<String>();
final _phonenoController = BehaviorSubject<String>();

and we get the data with the help of Stream and defined controllers.

Stream<String> get userNameStream => _userNameController.stream;
Stream<String> get passwordStream => _passwordController.stream;
Stream<String> get phonenoStream => _phonenoController.stream;

we also create a method for clearing the data

void dispose() {
updateUserName('');
updatePassword('');
updatePhoneNumber('');
}

and add the methods for validation which is very important and in which we check the value of the user.

//validation of UserName
void updateUserName(String userName) {
if (userName.length < 3) {
_userNameController.sink.addError("Please enter at least 3 words");
} else {
_userNameController.sink.add(userName);
}
}

//validation of Password
void updatePassword(String password) {
if (password.length < 4) {
_passwordController.sink.addError("Please enter more then 4 words");
} else {
_passwordController.sink.add(password);
}
}

//validation of Phone Number
void updatePhoneNumber(String phoneNo) {
if (phoneNo.length == 10) {
_phonenoController.sink.add(phoneNo);
} else {
_phonenoController.sink.addError("Please enter valid Phone Number");

}
}

After that, we create a provider class(bloc_provider.dart) in which we pass all the providers which are used in the Flutter application.

List<BlocProvider> blocProviders = [
BlocProvider<LoginPageCubit>(create: (context) => LoginPageCubit()),
];

And wrap MaterialApp() with MultiBlocProvider(), which we already define in the bloc_provider.dart in main. dart class. And pass the bloc Provider in providers.

MultiBlocProvider(
providers: blocProviders,
child: const MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
),
);

And create a class with the name of login_bloc_state.dart. In which we define the LoginBloc{} class and LoginInitial which extends to LoginBloc{}.

abstract class LoginBloc {}
class LoginInitial extends LoginBloc {}

In the LoginScreen(login_screen.dart) First we define the LoginScreenCubit. And then add initState(){} in which we add WidgetsBinding.instance and the use dispose method.

LoginScreenCubit? _loginScreenCubit;
@override
void initState() {
WidgetsBinding.instance?.addPostFrameCallback((_) {
_loginScreenCubit?.dispose();
});
super.initState();
}

In _loginScreenCubit, we add BlocProvider.

_loginScreenCubit = BlocProvider.of<LoginScreenCubit>(
context,
listen: false,
);

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

In the UI part, we create UI and use StreamBuilder for the text Field to update the data.

StreamBuilder(
stream: _loginScreenCubit?.passwordStream,
builder: (context, snapshot) {
return TextField(
onChanged: (text) {
_loginScreenCubit?.updatePassword(text);
},
decoration: const InputDecoration(
labelText: 'Password',
),
keyboardType: TextInputType.text);
}),

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

For Bottombutton we also use StreamBuilder. In this we pass _loginScreenCubit in the stream and cheBloc Widgetsck, whether the data is validated or not? after this we return GestureDetector() and apply a condition that if the data is updated then this screen goes to the next screen otherwise it’s showing an error. When the snapshot. data is true then the color of the button will be teal otherwise it’s grey.

_bottomButton() {
return StreamBuilder(
stream: _loginScreenCubit?.validateForm,
builder: (context, snapshot) {
return GestureDetector(
onTap: () {
if (snapshot.hasData) {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Home1()));
}
},
child: Container(
decoration: BoxDecoration(
color: snapshot.hasData ? Colors.teal : Colors.grey,
borderRadius: BorderRadius.circular(30)),
height: 70,
width: MediaQuery.of(context).size.width,
child: const Center(
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 27),
),
),
),
);
},
);
}

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

Conclusion:

In this article, we have been through What is Bloc in Flutter along with how to implement it in a Flutter. By using we can perform many state management orations.

❤ ❤ 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 Validation Using Bloc In Flutter:

GitHub – flutter-devs/validation_using_bloc
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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Security Testing In Flutter

Shaiq Khan
-
0
Security Testing In Flutter

Hi everyone!, today we start learning about security testing in a flutter, Security Testing is a type of Software Testing that uncovers vulnerabilities of the system and determines that the data and resources of the system are protected from possible intruders. It ensures that the software system and application are free from any threats or risks that can cause a loss.

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::

Security

Security philosophy

How to make a flutter app with high Security

Secure Your Applications through Flutter

Conclusion

So let’s get started! 🙌

Security:

The Flutter group takes the security of Flutter and the applications made with it truly. This page portrays how to report any weaknesses you might find, and records best practices to limit the gamble of presenting a weakness.

Security philosophy:

Flutter security strategy is based on six key pillars

  • > Identify: Track & prioritize key security risks by identifying core assets, key threats, and vulnerabilities.
  • > Detect: Detect and identify vulnerabilities using techniques and tools like vulnerability scanning, static application security testing, and fuzzing.
  • > Protect: Eliminate risks by mitigating known vulnerabilities and protecting critical assets against source threats.
  • > Respond: Define processes to report, triage, and respond to vulnerabilities or attacks.
  • > Recover: Build capabilities to contain and recover from an incident with minimal impact.
  • > Keep your copy of Flutter up to date: Private, customized versions of Flutter tend to fall behind the current version and may not include important security fixes and enhancements. Instead, routinely update your copy of Flutter. If you’re making changes to improve Flutter, be sure to update your fork and consider sharing your changes with the community.

How to make a flutter app with high Security:

When it comes to app development, the biggest concern for developers is app security. Did you know? About 57% of digital media time is spent on mobiles or tablets. With this increase in usage of smartphones and applications, app security has become the biggest concern for developers and as well as users. 75% of apps fail to clear the mobile security risks and ultimately put everything at risk.

Let’s take a look at some of the biggest app security risks and solutions for them.

> Unauthorized access to your application — Giving access to your application without verifying the user’s authentication is the biggest threat to security. Flutter provides various security and authentication plugins. By integrating a sign-in plugin, developers can easily add an authentication check to an app.

> Leaking of sensitive data — Nowadays mobile apps contain all kinds of sensitive data, from IDs, passwords, PINs, financial details, and more. If an app lacks security then these details can be at risk. Flutter offers a secure data storage plugin named NSUserDefault for IOS and SharedPreferences for Android.

> Code injections — Code injections are one of the most common practices by hackers. They insert unauthorized code in an already existing code. This can result in major issues like data loss or a total takeover of the application. Developers can use Flutter plugins which come with permissions that are already inserted into the plugin code.

Secure Your Applications through Flutter:

1. Loopholes in User Authentication:

This is still the most common and widely repeated security issue across mobile apps of all niches. Unauthorized access to the app is a key security threat for many mobile apps. There are two common approaches to deal with this. First of all, the app security measure must ensure that every user is authenticated, and secondly, there should be a secondary safeguard to block an unauthorized user from doing further damage to an app once such an incident is detected.

Fortunately, Flutter offers robust measures to prevent such security flaws. Within the Flutter, you can find several trusted and tested plugins for authentication that follow stringent sign-in and social login protocols leaving no room for unauthorized access. It is advisable to use one of these officially recommended plugins. For instance, when one needs to authenticate with Facebook, the official Facebook Sign in plugin should be trusted.

2) Data Leaks and Data Theft:

Instances of data leaks and data theft are steadily increasing, thanks to multiple device interfaces involving different data usage facets. An app needs to deal with multiple types of sensitive data, including personal identity, browsing and transaction data, financial data, etc. Since corporations are always after grabbing more customer or user data to derive data-driven market insights, data theft and data breaches are increasingly becoming common.

Flutter strengthens data security and actively prevents such data security risks by some measures. Let’s have a quick look at these measures to protect data from manipulation and theft.

  1. Flutter comes with a dedicated plugin for shared preferences for every device platform, and this allows for providing persistent storage. Now, developers simply can avoid using these Shared Preferences for storing all kinds of sensitive data like financial information, password, PIN, etc.

2. Every app uses an in-memory cache to store data locally in the device, which further exposes the data to security risks. Now Flutter developer can set a timer for clearing this cache every time the user concludes a session and presses the home button.

3. Apart from the above-mentioned measures, developers can also use app-level encryption to bolster data security further. Flutter developers can access iOS SecKey API and Common Crypto library for using both asymmetric and symmetric encryption keys for the app data. Flutter code is written in Dart, and the language offers several cryptos and encrypts libraries with several cryptographic hashing and encryption functions.

3) Malicious Code Injections:

Another major security threat common to many apps is code injection, which mostly happens through less reliable plugins. The code injections by getting access to the app database can inject malicious code, and result in data loss, data breaches, data tampering, faulty app performance, and complete crashing of the app. The most alarming thing is that such attacks occur every once in a while, and common app security safeguards are not enough to prevent them completely.

Since third-party plugins are mostly responsible for code injections leading to security risks, using official plugins from trusted and reputed sources is the safest practice to prevent such attacks. In case you still have been facing such attacks, detecting the culprit plugin and offloading it or deploying additional code to prevent such an attack is necessary. In such cases, you obviously need Flutter security experts and developers.

4) Data Loss in The Network:

Another way your app is often exposed to security risk is through the network leak and security loopholes in the network. HTTPS coming with a TLS or Transport Layer Security ensures optimum data encryption and authentication. Now, sometimes bad configuration of the TLS security parameters, including weak cipher suites, can cause great security vulnerabilities for the network connection.

The Dart: io library of Flutter ensures that the HTTPS connection is equipped with TLS Certificate Pinning and the HttpClient class for enhanced network security. Thanks to this, the HTTPS requests having custom trusted certificates can be maintained and managed by SecurityContext objects. Thanks to this, Flutter API calls can be protected with security features common in native frameworks.

Conclusion:

For developing a highly secure mobile app equipped with standout security features, Flutter can be the best choice. Google built the Flutter framework keeping all the security concerns and flaws in mind. Flutter almost has the answers to most of the security challenges for modern apps.

❤ ❤ 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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Smoke Testing In Flutter

Shaiq Khan
-
0
Smoke Testing In Flutter

Hi everyone! today we start learning about smoke testing in a flutter, Smoke tests take your code, build it, run it, and verify a thing or two. They will not verify that your software is 100% functional and correct. In a production app, they will act as a quick bailout — if the smoke test fails, the whole build fails. And it does so quickly.

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::

A Complete Guide to Smoke Testing in Software QA

What Is Smoke Testing in Software Testing?

Features of Smoke Testing

When To Perform a Smoke Test in a flutter

How To Plan a Smoke Test in a flutter

Types of Smoke Tests

Advantages of Smoke Testing

Best Tools for Smoke Testing

Conclusion

A Complete Guide to Smoke Testing in Software QA:

The expression “smoke test” was lifted from the development industry. During this test, water pipelines would be loaded up with smoke to check whether there were any leaks and other underlying issues.

In the tech business, smoke tests were first utilized for equipment testing. In this test, equipment sheets were tried to see whether they would smoke whenever they were connected and turned on. In the event that they transmitted smoke, they would bomb the tests and be promptly turned off. On the off chance that they didn’t, they’d continue on toward the following round of testing.

Smoke testing assumes a comparable part in programming improvement and programming quality affirmation — yet without the strict smoke.

What Is Smoke Testing in Software Testing?

Smoke testing is an essential piece of creating applications and quality confirmation. It is the primary line of protection against defective code in introductory programming fabricates. Smoke tests aren’t utilized to investigate assembles — they are utilized to see if the forms are working in any case.

Not at all like other QA tests that are comprehensive and check the general code, smoke tests are quick and focused. Profoundly or basic elements of the composting program are working appropriately.

Expecting that any of the basic features or components of the item aren’t working, then, the structure is immediately excused or patched up. Testing simply the key functionalities of the item helps save with timing, effort, and costs. Along these lines, smoke tests can help with working on your benefit from speculation on the item.

All things considered, in the event that there is a mistake with the basic region of the form, it would be an exercise in futility to really look at its other, less significant capacities. It would likewise be a loss to keep chipping away at the ongoing form too.

Features of Smoke Testing:

Smoke testing is additionally called build verification testing or build acknowledgment testing. The tests confirm whether the principal functions of the underlying form are working precisely. The build might be acknowledged for the following series of QA tests or dismissed out and out in view of the outcomes.

Smoke tests are now and again additionally alluded to as admission tests, as they choose the following round of testing. There are a few viewpoints engaged with smoke testing. These viewpoints or elements separate smoke testing from different kinds of QA tests.

Some of the key features of smoke testing are as follows:

  • > Quick to run: Just the significant elements or basic functionalities of the form are tried. It typically requires as long as an hour to complete a smoke test.
  • > Flexible: Smoke testing should be possible physically or through robotized processes.
  • > Non-exhaustive: These tests include an extremely predetermined number of experiments. Notwithstanding, they ought to in any case be fit for revealing fundamental mistakes in new forms.
  • > Broad coverage testing: Applicable to different levels of software testing, including integration testing, acceptance testing, and system testing.
  • > Easy to test: Smoke tests should also be easily executed by developers to improve QA processes.

When To Perform a Smoke Test in a flutter:

A smoke test is performed toward the start of the product advancement life cycle or SDLC process. This test ought to generally be finished with any recently finished form or delivery that is incorporated with existing programming.

As such, smoke tests are performed before any detailed regression or functional testing. By directing smoke tests from the get-go in the SDLC, developers or QA analysts can rapidly confirm the form quality and undertaking execution.

Builds with any errors are quickly sent back to development before any time is wasted with tests that are more exhaustive.

How To Plan a Smoke Test in a flutter:

A smoke test might be manual, automated, or a blend of the two. Regardless of what kind of smoke test you choose to lead, the arranging stage remains by and large something almost identical.

Here are some key tips for planning and running a smoke test:

  • > Prepare for testing: Make a point to set the favored air for the smoke test. This includes setting up any documents, servers, and licenses you might require for the test. Make duplicates of your documents and work, also, so you have reinforcements in the event that anything occurs.
  • > Collect all necessary files: Get all the form or code records you will require for the test.
  • > Write test script: Utilize a solitary content to run the tests. Besides, guarantee that your content is composed so it makes and saves a report after each test. Along these lines, any form of disappointment can be appropriately and precisely answered by the engineers.
  • > Clean data: Ensure your trials are in a perfect climate. Eliminate any unessential documents that might influence the smoke test. This additionally incorporates halting the waiter and exhausting data set tables.

Types of Smoke Tests:

There are three different ways developers and QA engineers can lead smoke testing. The kind of smoke test utilized may rely upon the builds you really want to test, time imperatives, or your own inclination.

  • > Manual tests: This is the most widely recognized sort of smoke testing. This technique tests each underlying form or any new highlights added to existing forms. In the manual technique, you should alter or refresh your test scripts in light of each test prerequisite. At times, you might have to make totally new scripts.
  • > Automated tests: Automation smoke testing permits you to test bunches of beginning forms. Utilizing a mechanization device for smoke testing is ideal when you have restricted time before assemble sending.
  • > Hybrid tests: As its name proposes, half-breed tests are a blend of both manual and computerized smoke tests. Joining the two sorts can support the general presentation of the testing.

Advantages of Smoke Testing:

Smoke testing is an urgent part of the software development process. Starter testing offers various advantages, for example,

  • > Detects bugs early in the development phase
  • > Conducting smoke tests early on helps you ensure the quality of your programs. You can quickly determine which builds need to go back to the drawing board.
  • > Improves effectiveness of QA team.
  • > Why waste time, effort, and manpower testing minor functions if the main purpose of the software already doesn’t perform as intended? By testing only the core functionalities of your build, you can quickly determine whether it would work as intended. This way, your QA team can move on to other projects and tests.
  • > Helps make the QA process highly effective
  • > Uncovering obvious errors immediately saves time and effort for your QA team. It helps streamline the QA process. Additionally, it can promote confidence and job satisfaction among the QA teams.

Best Tools for Smoke Testing:

There are several tools you can use to perform smoke testing. Coming up next are two of the best and most well known apparatuses for mechanized smoke tests:

  • > Selenium: Selenium is utilized widely in the product testing industry as a computerization apparatus. It is an open-source mechanization device and can run utilizing JavaScript. You can perform and get results for up to 250 experiments within three to four hours. Tests led utilizing selenium can be recorded and replayed in a similar climate as the product.
testWidgets('smoke test', (WidgetTester tester) async {
final app = MyApp();
await tester.pumpWidget(app); expect(find.text("0"), findsOneWidget); await tester.tap(find.byIcon(Icons.add));
await tester.pump(); expect(find.text("1"), findsOneWidget);
});
  • > PhantomJS: PhantomJS is the favored robotized smoke testing device for web applications, as long as your tests aren’t broad. It upholds a few web guidelines and works flawlessly with the advancement work process. You can chop down the testing time by 66% by utilizing PhantomJS. Besides, you can utilize this device to perform manual testing simpler, too.

Conclusion:

Quality assurance is an essential advance during the software development life cycle. You can’t place only anyone in control to obtain ideal outcomes and great forms. Individuals accountable for your QA cycle need more than preparing — they need insight and devotion.

❤ ❤ 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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Convert Object To Json In Dart & Flutter

Shaiq Khan
-
0
Convert Object To Json In Dart & Flutter

In this article, we will explore the Convert Object To Json In Dart & Flutter. We see how to execute a demo program. We will tell you the two ways to Convert objects to Json in your Dart & Flutter applications.

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::

Using without package

Using json_serializable package

Conclusion

Using without package

This approach includes physically composing functions to convert your Dart object to and from JSON. Here you have full command over the serialization cycle.

Steps:

  • Define your class.
  • Create a method inside the class to convert the object into a Map.
  • Convert the Map object to a JSON string using the jsonEncode() function from the dart:convert library.
import 'dart:convert';
import 'package:flutter/foundation.dart' show debugPrint;

class User {
  final String name;
  final int age;
  final bool isAdult

  User(this.name, this.age, this.isAdult);

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'age': age,
      "isAdult": isAdult,
    };
  }
}

void main() {
  User user = User('Ray Thomas', 28, true);
  String jsonString = jsonEncode(user.toJson());
  debugPrint(json String);
}

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

{"name":"Ray Thomas","age":28,"isAdult":true}

This method is adaptable and requires no outer dependencies or packages. The tradeoff is that you need to think of some additional code and the rationale might change on various use cases. As the intricacy of your objects increases, the manual execution can become error-prone and inefficient.

Using json_serializable package

This arrangement involves the json_serializable package that gives code age to JSON serialization and deserialization. In the accompanying model, we’ll characterize a Client class that is more confounded than the one you’ve found in the preceding example. This time, we’ll place the class in a different document named user. dart.

Steps:

  • Install the json_annotation, json_serializable, and build_runner packages by executing this command.
flutter pub add json_annotation json_serializable build_runner

Then run this one:

flutter pub get
  • In the lib directory of your Flutter project, add a new file called user.dart. Define the User class with the @JsonSerializable() annotation like so:
// lib/user.dart
import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  String name;
  int age;
  @JsonKey(name: 'is_author')
  bool isAuthor;

  User(this.name, this.age, this.isAuthor);
  Map<String, dynamic> toJson() => _$UserToJson(this);
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}
  • Build the JSON serialization code with build_runner by performing the following command
dart run build_runner build

A new file named user.g.dart will be automatically generated in your lib folder:

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'user.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

User _$UserFromJson(Map<String, dynamic> json) => User(
      json['name'] as String,
      json['age'] as int,
      json['is_admin'] as bool,
    );

Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
      'name': instance.name,
      'age': instance.age,
      'is_author': instance.isAthor,
    };

Use the generated toJson() method to convert the object or a list of objects to a JSON string. You can also use the generated fromJson() method to convert a JSON string back to an object or a list of objects.

// lib/main.dart
import 'dart:convert' show jsonEncode;
import 'package:flutter/foundation.dart' show kDebugMode;
import 'user.dart';

void main() {
  User user = User('Roy Thomas', 28, true);

  Map<String, dynamic> jsonUser = user.toJson();

  if (kDebugMode) {
    print(jsonEncode(jsonUser));
    // Prints: {"name":"Roy Thomase","age":28,"is_author":true}
  }

  List<User> users = [
    User('FlutterFevs.com', 33, true),
    User('Sam Fand', 22, false),
    User('Allen', 30, false),
  ];
  List<Map<String, dynamic>> jsonUsers =
      users.map((user) => user.toJson()).toList();

  if (kDebugMode) {
    print(jsonEncode(jsonUsers));
    // Prints: [{"name":"FlutterFevs.com","age":33,"is_admin":true},{"name":"Sam Fand',"age":22,"is_admin":false},{"name":"Allen","age":30,"is_admin":false}]
  }
}

This approach supports converting nested objects and complex types such as dates or enums to JSON strings with annotations. However, it requires adding a bunch of external dependencies and packages to your project. You’ll also have to run  a command to generate the code for the toJson() and fromJson() methods every time you make changes to your classes.

Conclusion:

In the article, I have explained the Convert Object To Json In Dart & Fluttert; you can modify this code according to your choice. This was a small introduction to Convert Object To Json In Dart & Flutter User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Convert Object To Json In Dart & Flutter of your projects. We’ve examined two different ways to turn a class object into JSON. The first one is quick and works well for simple use cases. The second one is powerful and shines with complex data structures. 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! 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.

Related: Flutter Rendering Widgets Using JSON Data

Related: Parsing JSON in Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Sanity Testing In Flutter

Shaiq Khan
-
0
Sanity Testing In Flutter

Sanity Testing is performed to test the minor fixes on the application and to make sure the application is good & running with all the vital functionalities up for perfection. Sanity Testing is not necessarily included in all the testing life cycles.

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::

Sanity Testing Definition

What is a Sanity Test?

What is a Sanity Test in Flutter?

What are the benefits of Sanity Testing in Flutter?

Features of Sanity Testing in Flutter

How To Do Sanity Testing In Flutter Application?

Why Are Sanity Test Cases Important?

Sanity Test Case Examples

Automated Sanity Tests

Conclusion

Sanity Testing Definition:

Let’s start with this working definition of sanity testing, which also describes both the meaning of sanity testing and the purpose of sanity testing:

Sanity testing is a fast and essential test (or set of tests) to decide whether a specific application or part is acting sensibly accurately. Sanity tests are frequently less in number and more engaged than regression tests. However, it is typical for regression tests to begin as Sanity tests.

What is a Sanity Test?:

A Sanity test is many times a fast mind something to check whether it seems OK at an essential, superficial. A sanity test may be one fast test, for example, an estimation check. For instance, assuming you are trying the checkout and installment capacity of a versatile application, you need to ensure charges are registered accurately. Suppose you realize the expense rate is 9.95%.

You might run a fast test to purchase something and afterward pay for it. You check the pre-charge absolute, then the after-charge complete. To you, you anticipate that the assessment should be roughly 10% of the price tag, a simple computation to make.
Is this a precise computation? No. In any case, the first idea of sanity from different disciplines is that of an estimation just to check whether the fundamental capacity for the most part appears to be legit.

What is a Sanity Test in Flutter?:

Flutter testing is an excellent chance for sanity tests, however, it is essential to comprehend that sanity tests can likewise be performed by designers. All in all, you don’t need to trust that a free analyzer will play out a product sanity test.

In Flutter testing, sanity tests can be an early type of testing, either casually or officially.

What are the benefits of Sanity Testing in Flutter?:

The benefits of Sanity Testing in flutter are listed below:

  • > Sanity Testing helps to avoid wastage of time.
  • > Sanity Testing helps to save cost in testing even if the build failed.
  • > In this type of testing, the tester directly rejects build upon failure

Features of Sanity Testing in Flutter:

Some distinguishing features of sanity tests in flutter are:

  • > Simple — Sanity tests are not planned to be complex yet all things considered, effectively planned and performed.
  • > Defined or exploratory — Sanity tests likely could be predefined in an organization like an agenda, or set of basic experiments. However, there is additionally a typical act of performing sanity tests in light of instinct and experience.
  • > Comprehensive enough — Sanity tests don’t cover all usefulness, however they ought to cover to the point of giving an essential appraisal of conduct.
  • > Quick — When contrasted with different types of testing which might be led later, sanity tests are planned to be performed rapidly with the end goal of speedy criticism. The speed of input is significant in a quick turn of events and persistent coordination to be aware assuming further advancement is conceivable.

How To Do Sanity Testing In Flutter Application?:

While sanity testing is some of the time acted in an exploratory methodology, there is incredible worth in having repeatable sanity tests. This infers planned an arranged strategy.

There are two levels of test planning to perform in the sanity testing: High-level sanity test planning and detailed sanity test planning. We will explore both of these levels of test planning.

> High-Level Sanity Planning:

At the high level of sanity test planning, the big picture is defined. This includes defining:

  • > Sanity test objectives
  • > The scope of sanity testing
  • > Risks
  • > Features to be covered in sanity testing
  • > Roles and responsibilities

> Detailed Sanity Planning:

At the detailed level, you are concerned about characterizing sanity test cases that accomplish the targets and cover the highlights framed at the elevated degree of sanity test planning.

Fortunately, itemized test examination and configuration are not needed for sanity test cases. The entire idea is one of straightforwardness that gives a degree of certainty that the application is performing accurately at a fundamental level.

Why Are Sanity Test Cases Important?:

Sure, you could perform a few sanity tests manually in an ad-hoc manner. However, there is a hidden cost in this approach due to the extra time and effort needed to think of good tests, then evaluate those test results. Sometimes, the test evaluation requires some research to determine what is correct behavior.

In the ad-hoc sanity test approach, every test is in the moment and tends to fade away shortly after the test. Then, the next time you need to test the same application, you have to try to remember as many of the sanity tests as possible. That is an elusive goal.

Defining sanity tests is an investment of time and effort. But, the payback is seen in the ease of repeating the tests reliably. This is especially true when sanity tests are automated.

Sanity Test Case Examples:

There is a defect in the login page when the password field accepts less than four alphanumeric characters and the requirement mentions that this password field should not be below eight characters. Hence, the defect is reported by the testing team to the development team to resolve it.

Sanity test cases for validating Sign Up functionality quickly:

  1. Sign up option is available on the login page.
  2. Clicking “Sign up” redirects the user to the appropriate sign-up form.
  3. The user can fill in details in all the mandatory fields of the sign-up form.
  4. The user can submit “Sign up” without any error.
  5. The user can access the account by using the credentials provided during sign-up.

Automated Sanity Tests:

It would probably not make sense to automate first-time, ad-hoc sanity tests. The main reason is that it would take away from the quick and simple nature of the test. It typically takes much more time to create the automation for a test as compared to one manual test execution.

In this scenario, you would not have time to automate the sanity test for the job at hand. However, you could certainly document the sanity test, even if only on paper, to demonstrate it as a test case. If the test has value you might consider adding it to a sanity test set for future test runs.

As a contrasting example, perhaps you are working on a project where you get a daily build and you have identified at least 20 functions that must work at a very basic level before running a more complete regression test. These functions are subject to changes in the way they behave, so you want to know about any problems as soon as possible.

Conclusion:

QA team uses Sanity testing as a decision criterion for accepting or rejecting the build. Although, it should be quick enough to complete yet should consist of test scenarios to validate the new functionality or bug fix of the build.

❤ ❤ 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.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

PDF Document View & Download In Flutter

Shaiq Khan
-
0
PDF Document View & Download In Flutter

In Flutter different elements make your application wealthy in functionality and give simplicity to the client to do stuff inside the application and get a better client experience, being a service provider is likewise vital for designers.

These little yet significant functionalities like getting pictures and videos from the gallery, opening maps, and automatic OTP autofill, are a few significant highlights that make any application easy to utilize and in this article, we will make sense of fundamental yet significant functionality named PDF Document View.

There are various packages that you can use to open a pdf in your application and download it to your local storage some are a piece muddled and some are not difficult to execute, and here I will clarify perhaps the most straightforward way to use it.

In this article, we will explore the PDF View & Download In Flutter. We will see how to implement a demo program. Learn how to view pdf and download it to your local storage using a network or locally stored file in your flutter applications.

For PDF View:

flutter_pdfview | Flutter Package
Native PDF View for iOS and Android Add this to your package’s pubspec.yaml file: dependencies: flutter_pdfview: ^1.2.1…pub.dev

For PDF Download (to your local storage):

path_provider | Flutter Package
A Flutter plugin for finding commonly used locations on the filesystem. Supports Android, iOS, Linux, macOS, and…pub.dev

For Network PDF’s :

dio | Dart Package
Language: English | 中文简体 A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData…pub.dev

For Local PDF’s :

file_picker | Flutter Package
A package that allows you to use the native file explorer to pick single or multiple files, with extensions filtering…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::

Introduction

Implementation

Code Implement

Conclusion

GitHub Link

Introduction:

The demo video below shows how to implement PDF view and download in flutter and shows how we can access PDFs from both networks and locally in your flutter application. We will show a sample PDF when clicking on the button “Load a file from the network” if the user wishes to download this PDF he has an option in the top right corner of the app bar to save the file in the storage. The user can also view already downloaded PDFs from his storage with another button “Pick a file from local”.

Demo Module::

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
flutter:
sdk: flutter
dio: ^4.0.6
file_picker: ^4.5.1
flutter_pdfview: ^1.2.2
path_provider: ^2.0.10

Step 2: Import

import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:path_provider/path_provider.dart';
import 'package:dio/dio.dart';
import 'package:file_picker/file_picker.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 pdf_viewer_page.dart inside the lib folder.

We will create a PDF viewer page which will be a stateful widget, which will be responsible for viewing PDFs in our app.

Widget build(BuildContext context) {
final name = basename(widget.file.path);
return Scaffold(
appBar: AppBar(
title: Text(name),
actions: [
IconButton(
onPressed: () async {
await saveFile(widget.url, "sample.pdf");
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(
'success',
style: TextStyle(color: Colors.white),
),
),
);
},
icon: const Icon(Icons.download_rounded),
),
],
),
body: PDFView(
filePath: widget.file.path,
),
);
}

Also, we will create a saveFile() function to save the file locally in our internal storage, we will pass the URL of the PDF file and a name to save it as.

Future<bool> saveFile(String url, String fileName) async {
try {
if (await _requestPermission(Permission.storage)) {
Directory? directory;
directory = await getExternalStorageDirectory();
String newPath = "";
List<String> paths = directory!.path.split("/");
for (int x = 1; x < paths.length; x++) {
String folder = paths[x];
if (folder != "Android") {
newPath += "/" + folder;
} else {
break;
}
}
newPath = newPath + "/PDF_Download";
directory = Directory(newPath);

File saveFile = File(directory.path + "/$fileName");
if (kDebugMode) {
print(saveFile.path);
}
if (!await directory.exists()) {
await directory.create(recursive: true);
}
if (await directory.exists()) {
await Dio().download(
url,
saveFile.path,
);
}
}
return true;
} catch (e) {
return false;
}
}

Now, inmain.dartinside thelibfolder.

We will give the user two ElevatedButton() i.e. “Pick a file from local” & “Load file from the network”, then we will create two separate functions, pickFile() and loadFromNetwrok() which link to each of the two buttons.

  • > For local file access:
Future<File?> pickFile() async {
final result = await FilePicker.platform.pickFiles(
type: FileType.custom,
allowedExtensions: ['pdf'],
);
if (result == null) return null;
return File(result.paths.first ?? '');
}
  • > For network file:
Future<File> loadPdfFromNetwork(String url) async {
final response = await http.get(Uri.parse(url));
final bytes = response.bodyBytes;
return _storeFile(url, bytes);
}

Future<File> _storeFile(String url, List<int> bytes) async {
final filename = basename(url);
final dir = await getApplicationDocumentsDirectory();
final file = File('${dir.path}/$filename');
await file.writeAsBytes(bytes, flush: true);
if (kDebugMode) {
print('$file');
}
return file;
}

And lastly, we will create a function that will redirect us to the pdf_viewer_page.dartfor both local and network-loaded PDF files.

void openPdf(BuildContext context, File file, String url) =>
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PdfViewerPage(
file: file,
url: url,
),
),
);

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

Output

When a user opens any PDF the output screen will look like this, with the app bar containing the name of the PDF document.

Output

Conclusion:

In the article, I have shed some light on the fundamental construction of PDF viewer and downloader in a flutter program, you can modify this code as per your need. This was a little prologue to PDF View and Download from my side, and its functioning using Flutter.

I trust this blog will give you adequate data on trying up the PDF Document View and Download in your flutter projects. We showed you what PDF Viewer and Downloader are? its implementations, and how to utilize the PDF Document View and Download from both local and network. Made a demo app to work in your flutter applications. So if it’s not too much trouble, 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 Flutter PDF Document VIew and Download Demo:

GitHub – flutter-devs/pdf_viewer_and_downloader_example
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.

Related: Story View In Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

1...534535536...549Page 535 of 549

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.