Forem: Mouaz M. Al-Shahmeh

How to change Flutter Stop Error Screen Style?

Mouaz M. Al-Shahmeh — Mon, 04 Apr 2022 23:52:33 +0000

In many cases you need to see the error exception of Flutter as friendly as possible when you develop your app. For example, this red stop screen error:

Fortunately, the red stop exception error screen of Flutter you can edit as you want with custom style.
In main function of dart you need to add customization of ErrorWidget.builder as the following:
`void main() {
ErrorWidget.builder = (FlutterErrorDetails details) => Material(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
// If you need to add another friendly photo
// you can here for example

         const Text(
          'Error',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.redAccent,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 20),
        Text(
          details.exceptionAsString(),
          textAlign: TextAlign.justify,
          style: const TextStyle(
            color: Colors.red,
            fontSize: 18,
            fontWeight: FontWeight.normal,
          ),
        ),
      ],
    ),
  ),
),

);
runApp(MyApp());
}`

And the result of any error as this instead of it before customization:

Finally, the error or Flutter exception appear more friendly when you develop your apps.

GoRouter and Flutter Navigation 2 Support

Mouaz M. Al-Shahmeh — Tue, 29 Mar 2022 17:04:36 +0000

In this essay I am going to talk about modern navigation in Flutter with Navigation 2 over previous navigation in flutter.
In previous navigation you need to call push, pushReplacement or pushReplacementUntil, but now in goRouter from Flutter you need only go or push on routing of your stack app.

Stack illustration (1)
In navigation or routing between your screens in app you need to care about it especially if there are a lot of it such as e-commerce app. So, you need to system stack of routing which is still and wether you need to delete if move from it.
GoRouter and Flutter Declarative routing:
The purpose of the go_router package is to use declarative routes to reduce complexity, regardless of the platform you’re targeting (mobile, web, desktop), handle deep and dynamic linking from Android, iOS and the web, along with a number of other navigation-related scenarios, while still (hopefully) providing an easy-to-use developer experience. (2)
First you need to add dependency in pubspec.yaml:
dependencies: go_router: ^3.0.6 # or the latest version from pub.dev
Then add the import in main.dart:
import 'package:go_router/go_router.dart';
We need to modify MaterialApp.router in class App as this:
@override Widget build(BuildContext context) => MaterialApp.router( routeInformationParser: _router.routeInformationParser, routerDelegate: _router.routerDelegate, );
And we need to declare routes in our app as this:
final GoRouter _router = GoRouter( routes: <GoRoute>[ GoRoute( path: '/', builder: (BuildContext context, GoRouterState state) => const HomeScreen(), ), GoRoute( path: '/productDetail', builder: (BuildContext context, GoRouterState state) => const ProductDetailScreen(), ), ], );
After that we can use GoRouter anywhere we want. but what the difference between go and push?
In this code we use go that means the current screen is deleted from stack before we route to another screen by only write context.go('/') method.
`/// The screen of the product detail screen.
class ProductDetailScreen extends StatelessWidget {
/// Creates a [Page1Screen].
const Page1Screen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text(App.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => context.go('/'),
child: const Text('Go to home page'),
),
],
),
),
);
}Or if we need to save old screen in the stack we can use push way only by type context.push('productDetail') such as:/// The screen of the home page.
class HomeScreen extends StatelessWidget {
/// Creates a [Page1Screen].
const Page1Screen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text(App.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => context.go('/productDetail'),
child: const Text('Go to product detail page'),
),
],
),
),
);
}`
To summarize:
If you want to save the current screen in the app in the stack you can use context.push with name of new route. Or if you want to delete it before route you can use context.go with the name of new route.
References:
1- https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Data_stack.svg/1200px-Data_stack.svg.png
2- https://pub.dev/packages/go_router

How to dispose provider controller and delete it if we do not need it other time in app from code?

Mouaz M. Al-Shahmeh — Wed, 23 Mar 2022 19:03:23 +0000

How to dispose provider controller and delete it if we do not need it other time in app from code?

Mar 14 '22 Comments: Answers: 1

How to delete provider controller if we do not need it other time in app?

For example, sign in first time screen , or intro screens ... etc If we do not need it again.

Open Full Question

Importance of Flutter State Management

Mouaz M. Al-Shahmeh — Sun, 13 Mar 2022 16:37:18 +0000

What is Flutter?
Build apps for any screen, Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. (1) Flutter is to flap the wings rapidly. (2)
**What is State Management?
State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls. For example, a state managed UI control such as a button will be in the enabled state when input fields have valid input values and the button will be in the disabled state when the input fields are empty or have invalid values. As applications grow, this can end up becoming one of the most complex problems in user interface development. (3) Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction - or a session - to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs - saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session. (4)
**Why is State Management necessary?
State management is essential in aligning and integrating core business applications and the cloud. Without some form of state management, business activities as routine as the purchase of something or a request for information would have to be structured as a single request or response exchange. This could put a significant burden on the user and would almost certainly reduce the effectiveness of the application. In some cases, such as the processing of an order, a stateless exchange could hide critical information like current stock levels, resulting in what could be a significant business impact on the seller and a major inconvenience to the buyer. (5) State Management reflects the efficiency of the system and the care taken by developers to build that system so that every functionality and feature performs smoothly and precisely. State management helps to align and integrate the core business logic inside the application with servers and databases. Without proper state management the burden on users will increase and that would certainly decrease the effectiveness of an application. As well as by centralizing everything with State management, it will be easier to maintain a code base and will in-turn improve the code-quality and readability. (6)
**Flutter State Management
Here, Flutter has a different approach to state management. Unlike other frameworks, Flutter tries to rebuild the UI from scratch to reflect the latest changes in the state. Two Google developers from the Flutter development team, Filip Hráček, and Matt Sullivan have presented in a detailed way what pragmatic state management is in Google I/O 2019 conference.(7)
From imperative to declarative UI
There's a shift happening in how mobile apps are built - again. A few years ago, mobile developers moved from languages created in the 1980s and ʼ90s (think Objective-C and Java) toward more modern and expressive programming languages (Swift and Kotlin). Now, we're seeing a transition from imperative to declarative UI frameworks in the form of SwiftUI and Jetpack Compose. This promises to dramatically increase developer productivity, enabling us to build apps faster with less code. Declarative UI requires thinking about app development from a new perspective. Declarative UI requires thinking about app development from a new perspective, accepting that it's okay to rebuild parts of your UI from scratch instead of modifying them. Modern CPUs are fast enough to do so, and can even handle animations. In a declarative framework, changes in state trigger a rebuild of the UI, which removes a whole category of state-related bugs and makes it easier to reason about updates. You describe what the UI should look like for a given state, and the framework figures out how to do it using sensible defaults and context. This greatly reduces the amount of code you need to write and makes it easier to iterate.(9)
(10)Theory kinds of states
At any point in time of the flutter application lifecycle, your application will be in either of two below states :
a. Local / Ephemeral State
b. Shared / App state
(11)Local State
Whenever you need to change the state of a single page view which may contain UI controls or animation then it is considered as a local state. You can easily do that using the Stateful widget.
Shared App State
Whenever you need to change the state of multiple widgets which are shared across your application then it is Share app State.
Categorize of Flutter State Management ways

Provider A wrapper around InheritedWidget to make them easier to use and more reusable. By using provider instead of manually writing InheritedWidget, you get: simplified allocation/disposal of resources lazy-loading a vastly reduced boilerplate over making a new class every time devtool friendly - using Provider, the state of your application will be visible in the Flutter devtool a common way to consume these InheritedWidgets (See Provider.of/Consumer/Selector) increased scalability for classes with a listening mechanism that grows exponentially in complexity (such as ChangeNotifier, which is O(N) for dispatching notifications).(12)
setState You need to learn about stateful or stateless in Flutter and the difference between them to detect setstate but there are more wisdom state management ways such as provider.
Inherited Widget & Inherited Model An InheritedModel is a way of sharing data across your whole app, the same as InheritedWidget. An InheritedModel is a subclass of InheritedWidget, so it works the same in those instances, but adds some extra useful functionality. (13)
Redux
Fish Redux
GetIt
MobX At the heart of MobX are three important concepts: Observables, Actions and Reactions. (14)8. Riverpod Improvement over provider way of state management, A Reactive Caching and Data-binding Framework. (15)
GetX GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically. (16)
BLoC pattern Bloc is a design pattern created by Google to help separate business logic from the presentation layer and enable a developer to reuse code more efficiently. (17) (18)
MVVM
Writing maintainable and clean code requires strategies like segregating responsibilities into different layers. There are various software architectural patterns that streamline the code organization into separate layers like MVC, MVP, MVVM, etc. MVVM is quite a common design pattern in writing UI based applications in general. A Model-View-Viewmodel mainly concerns these layers:
View: Responsible for visuals like UI elements on the screen
Model: It can be a Repository that takes care of managing data across the services like Database, Network, etc
ViewModel: It acts as a mediator to View & Model. The key responsibilities of this layer are in-taking actions, processing data and giving back the new state to the View layer.
(19)
Conclusion
In this article, we talked about the definition of Flutter and the definition of State Management and its management in Flutter and about the most famous techniques used in State Management, their positives and negatives, and the door to development continues in this section because through State Management, Flutter technology is developed day after day to become a fierce competitor to the applications of the native over platforms.
References
https://flutter.dev/
https://www.merriam-webster.com/dictionary/flutter
https://redux.js.org/
https://www.techtarget.com/searchapparchitecture/definition/state-management
https://www.techtarget.com/searchapparchitecture/definition/state-management
https://medium.com/dhiwise/7-things-you-need-to-know-about-flutter-state-management-42f840ef022e
https://www.youtube.com/watch?v=d_m5csmrf7I
https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro
https://increment.com/mobile/the-shift-to-declarative-ui/
https://docs.flutter.dev/development/data-and-backend/state-mgmt/declarative
https://docs.flutter.dev/development/data-and-backend/state-mgmt/ephemeral-vs-app
https://pub.dev/packages/provider
https://flutter.institute/sharing-data-inheritedmodel-vs-inheritedwidget
https://mobx.netlify.app/concepts/
https://riverpod.dev/
https://pub.dev/packages/get
https://www.mitrais.com/news-updates/getting-started-with-flutter-bloc-pattern/
https://www.raywenderlich.com/4074597-getting-started-with-the-bloc-pattern
https://jayrambhia.com/blog/android-mvvm-intro