The perfect flutter boiler plate and state management solution does not exi….
Tags: flutter, mobile, ios, android
Published: 2023-03-08 21:25:38

**Yo, yo, yo, 148–3 to the 3 to the 6 to the 9**, representing the **FLUTTER**. What’s up?!
As you may know, **flutter is the new sexy** in mobile app development.

![Just Do it Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jep20mwt9buq5e75qfyt.jpg)

[**Flutter**](https://flutter.dev) is an open-source mobile application development framework created by **Google**. It allows developers to build **high-performance**, **cross-platform apps** for both **Android** and **iOS** platforms using a single codebase. Flutter draws its own canvas using graphics engine called [**Skia**](https://skia.org). Unlike, React Native, which relies on native components to draw the UI.

> “The choice of framework ultimately depends on the **requirements** and **goals** of the project. There is **no one-size-fits-all** solution, and developers must consider the **trade-offs** and **benefits** of each option before making a decision and going all in.”

![Choose Wisely Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6z4l77so5m0jr08q3em.jpg)

It’s very true that many **developers** focus on making sure their code simply works, but writing high-quality **production-level code** requires attention to a variety of factors beyond basic functionality. This includes considerations such as **scalability**, **readability**, **modularity**, and adherence to good design patterns.

I have used the **MVVM design pattern**. I follow a service-oriented architecture, where each view has a view model and view model can call appropriate service method for **API** calls and to connect to outer world.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w63mpdj8rmy6x2qa2vb.jpg)

> Here is the forgot password view,

```
import 'package:boiler_plate/ui/common/ui_helpers.dart';
import 'package:boiler_plate/ui/dumb_widgets/circular_progress_indicator.dart';
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'package:stacked/stacked_annotations.dart';

import 'forgot_view.form.dart';
import 'forgot_viewmodel.dart';

@FormView(
  fields: [
    FormTextField(
      name: 'email',
    ),
  ],
)
class ForgotView extends StackedView<ForgotViewModel> with $ForgotView {
  ForgotView({Key? key}) : super(key: key);

  @override
  Widget builder(
    BuildContext context,
    ForgotViewModel viewModel,
    Widget? child,
  ) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(
                    color: Theme.of(context).colorScheme.onBackground,
                  ),
                ),
                padding: const EdgeInsets.all(16),
                child: const Icon(Icons.fingerprint),
              ),
              verticalSpaceMedium,
              Text(
                'Forgot Password',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              verticalSpaceMedium,
              Text(
                'No worries, we got you covered.',
                style: Theme.of(context).textTheme.bodyMedium,
              ),
              verticalSpaceMedium,
              TextFormField(
                decoration: const InputDecoration(
                  hintText: 'Email',
                  prefixIcon: Icon(
                    Icons.email,
                  ),
                ),
                enableSuggestions: false,
                autocorrect: false,
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.done,
                controller: emailController,
              ),
              verticalSpaceMedium,
              viewModel.isBusy
                  ? const Center(
                      child: MyCircularProgressIndicator(),
                    )
                  : Center(
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          minimumSize: const Size(128, 48),
                        ),
                        onPressed: () {},
                        child: const Text('Reset Password'),
                      ),
                    ),
              verticalSpaceMedium,
              Center(
                child: TextButton(
                  onPressed: viewModel.navigateToLogin,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      Icon(
                        Icons.arrow_back_ios,
                      ),
                      horizontalSpaceSmall,
                      Text(
                        'Back to Login',
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  ForgotViewModel viewModelBuilder(
    BuildContext context,
  ) =>
      ForgotViewModel();

  @override
  void onViewModelReady(ForgotViewModel viewModel) {
    syncFormWithViewModel(viewModel);
  }

  @override
  void onDispose(ForgotViewModel viewModel) {
    super.onDispose(viewModel);
    disposeForm();
  }
}
```

> and it’s respective forgot view model

```
import 'package:boiler_plate/app/app.locator.dart';
import 'package:stacked/stacked.dart';
import 'package:stacked_services/stacked_services.dart';

class ForgotViewModel extends FormViewModel {
  final _navigationService = locator<NavigationService>();

  void navigateToLogin() {
    _navigationService.back();
  }
}
```

> Here is the **[output](https://www.youtube.com/watch?v=-HWkmymzgtc)**

> Enough Talk. Let’s share some **resources** for you to have a look at.

Let me introduce **[Stacked](https://pub.dev/packages/stacked)**. It provides a simple and elegant state management solution along with its custom **without build context navigation, dialog, bottom sheet and snackbar** services.
(read detailed documentation **[here](https://stacked.filledstacks.com)**)
Here is the **[repository](https://github.com/Mr-RobotDev/flutter-boilerplate)** to better understand and a very good README waiting for you to start. (Please like 👍 the repo).


![We are in the endgame now meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ljqb9m7majcw0ocxkrt.jpg)

What’s next? It was all I had to share and it’s time for you guys to do something creative with your next mobile app.
Oh, Also. Don’t forget to hit **like** 👍 if you find this article useful (It helps me a lot to share **valuable info** with you) and **comment** if you have any suggestions.
You can connect with me on **[LinkedIn](https://www.linkedin.com/in/abdullah-shahid-b9a594219/)** or follow me on Medium for more.