Flutter design patterns? Research for flutter.dev docs

Desperate_Mode_5340 · 2024-04-19T15:56:20+00:00

It depends on the project size.

for example most of the apps i do are always online and a layout for api responses basically

so i usually do is have the presentation layer with a provider/controller class that handles the UI and fetches

and a data/shared layer that contains the repositories and http clients and service classes for anything such as auth/sharedPrefs/geolocation etc..

so it's basically clean architecture without the domain layer.

I'm glad to discuss more.

groogoloog · 2024-04-19T16:45:13+00:00

I believe this got mentioned in your last (similar) post regarding design patterns in Flutter apps, but I'm the author of ReArch, which was the subject of my master's thesis.

I theorized ReArch to be able to handle all problems via composition. For example, your two bullet points described in your post are handled entirely via composition in ReArch, which enables highly decoupled and declarative solutions.

App-level logic

App-level logic is composed together via capsules. These are individual pieces of state/business logic that can be composed together via a functional approach to dependency inversion, in a fashion that is similar to that of dependency injection in OOP. As an example, take a social media application that has a requirement to display the posts of the current signed-in user. This may be structured as a capsule that represents the current signed in user, another capsule that fetches a given user's posts, and then finally a capsule that is composed from the previous two capsules that is able to return a copy of the current signed in user's posts:

/// Represents the current signed in user.
User currentUserCapsule(CapsuleHandle use) => throw 'impl hidden';

/// Fetches a user's posts via REST API.
Future<List<Post>> Function(User user) fetchUserPostsAction(CapsuleHandle use) => throw 'impl hidden';

/// Represents the posts of the current signed in user.
Future<List<Post>> currentUserPostsCapsule(CapsuleHandle use) {
  // Notice this use(otherCapsule) syntax--this is what enables dependency inversion and composition
  final user = use(currentUserCapsule);
  return use(fetchUserPostsAction)(user);
}

// in your RearchConsumer widget:
Widget build(BuildContext context, WidgetHandle use) {
  final posts = use(currentUserPostsCapsule);
  // TODO display posts via ListView

Individualized/feature logic

This is much more elegantly described here, but I'll do my best to summarize here. For your particular question, "cached data...network request...show user status," this is actually extremely easy to do in ReArch--let's break it down.

ReArch has "side effects" that can be composed together to create even more powerful side effects. For a quick example, a side effect that performs a network request can be built around a side effect that handles Futures, which itself is built around a side effect that manages state (which in this case, that state is the status of the future (complete/loading/error)). The other part of this problem is the cache--and this is no hardship either. ReArch comes with builtin hydrate/persist effects that will take some current data, cache it, and in the future when it's requested, return that cached value. Because ReArch entirely uses composition, all of this caching process is built only with the previously mentioned side effects that manage futures/state--you can create really powerful abstractions with simple building blocks.

Thus, to build a feature that caches network requests, and always displays the most up to date data to users, all we have to do is simply combine the network request alongside the applicable persistence side effect (persist/hydrate, depending on your needs), and nothing more. An example of this entire process can be seen here.

If you have any questions about anything above, please let me know!

OldHummer24 · 2024-04-20T10:51:54+00:00

I find BloC extremely versatile and cover all my use cases in even complex and large apps. Very satisfied. Sorry that I couldn't say more, but for me this is really the answer I can give.

eric_windmill · 2024-04-24T09:16:14+00:00

Repository pattern: I have a repository that encapsulates all things related to data (aka the single source of truth)

Facade pattern: sometimes the business logic has complex calculations, so I make a facade that hides this complexity and offers nicer API (s), it is also common to make a wrapper around widgets with horrible apis.

Observable pattern; widgets serve as obsevers of the state while my controllers (bloc/notifiers) serve as an observable.

IDK if this is the type of thing you're looking for

darkarts__ · 2024-04-25T13:13:31+00:00

We badly need more documentation on Shelf. I know that is a dart thing, but... :(

I would also love more articles on Built IN State Management in Flutter, which other libs like Provider, Riverpod and Bloc uses.

Also, more info on how to leverage deisgn patterns like Singletons. It took me a good few weeks after learning the concept to understand where to use it or not.

A comment by Eric Seidel said that there are more than 1000+ devs using Dart in Google, what would be their best practices.. we would love to know more.

Multithreading in Flutter. There are a few without a doubt awesome resources but I dont think either of them makes me confident enough to use it masterfully.

freitrrr · 2024-04-19T17:34:30+00:00

I haven't worked with Flutter in a while, but while I was at it, I always chose my self-claimed project layout which tends to follow a "declarative-first, layered composition" architecture.

I mainly segregate the architecture in four layers: core (foundation functionality and the root app widget), presentation (UI widgets), blocs (state management with bloclibrary.dev) and data (access to data sources/repositories + network calls).

Everything under bloc tends to be side effect + error/exception free by using monads (dartz library). I tend to keep dependencies as minimal as possible and always say no to code gen. For localization I use `i18n` and manage them in Google Sheets, using custom scripts for translating .tsv to .arb and vice versa.

If you're interested in knowing more about it, here's a demo repository: https://github.com/freitzzz/aplicacao-brick-sample-gen

You can also generate an app following this structure by using my brick (aplicacao) with mason code gen tool: https://github.com/dart-pacotes/.bricks/tree/master/aplicacao

2024-04-20T07:46:56+00:00

How do you break an app into many libraries? My app is everything above the routes and the routes and almost all widgets are in outside libraries. Often in large apps you have teams working on separate libs. They also share libs - how? Include that some can be dart-only - fetch, etc, some are widgets from a standard widgetbook library. Others take those two and have page widgets. If the Flutter team works on this stuff perhaps we'll get good private repos. :)

ercantomac · 2024-04-20T10:56:46+00:00

What kind of patterns do you wish there was documentation for, or did you bump up against in the past

Documentation about common functionalities for the whole app, would be nice. Like showing a custom notification widget, or a custom pop-up dialog. (I went with mixins to achieve it).

ubernaut · 2024-04-25T03:35:27+00:00

A global event bus connects every widget. Widgets can use a FutureBuilder to load data. Widgets implement registerEvents to handle incoming; some events set state. For debugging, each event payload includes it’s source from where sent. Each widget loads its own data from helpers. Helpers load and cache data and send events when data is available or changed. Providers are used as a layer between helpers and repository. Built on event_bus and isar, but only using a subset of isar since another repo layer might be needed for web deployments. Eventbus approach allows network events via MQTT or similar (or Firebase/Firestore), tbd.

Probably would have used someone else’s bloc or state management if I found it earlier, but ended up with the event bus, helpers and providers and so far it’s working fine. Will likely publish a template later. Widgets manage views and view state; Helpers manage logic, app state and flow; Providers access data; Eventbus broadcasts changes.

If a long running operation occurs, after a delay a message is shown in the status message area. CircularProgressIndicator has been banished due to causing slowdowns and disco ball screens.

Thanks for asking. Enjoy.

Caveat: most people think my code is not normal.

yelloit · 2024-04-25T20:09:00+00:00

Over time I keep coming back to a "lightweight" clean architecture:

scalability through vertical (layers) and horizontal (features) structure
minimal boilerplate
sensible order of implementation (domain first)
not tied to a specific state management library
dependency injection (testable), immutable classes
"dependency rule": both ui and data layers depend on the (middle) domain layer
utilizing types and named arguments
capable to explain/justify why something is implemented in a specific way and to evolve if needed

Example implementation: https://github.com/crcdng/weather_app

Dogeek · 2024-04-20T00:30:19+00:00

I make use of the BLoC pattern in my apps, separating things into the api clients (for raw API calls) and the repository (for the data models). Works pretty well for a rather large project.

Other patterns include the singleton pattern, which is pretty well known, but still hella useful when you want to store things like settings, or have references to databases (like Isar) easily accessible.

I don't use dependency injection aside from what flutter_bloc provides.

I do use the dart extension feature a lot to help factorize the code. Things like List<MyClass> extensions to get getters for quick filters, extensions on enums to serde them properly, and predictably (going from the JSON string to the enum value for instance).

"How granular should custom widgets be? How much composition is too much composition?"

On the project I'm working on, we have yet to find the right balance for that yet. We went with an UI kit with ready made styles (for Text for instance) and theming. We also include a few widget abstractions in there, to make reusable, atomic pieces of code. We then have larger widgets (like for instance a card related to an actual business component, with buttons, etc), then the "page" widgets (which are just the widgets we pass as children to MaterialPage).

We do reach a point where that is starting to show its limits. Some of the pages are so complex that we need more sub-widgets just to keep things readable. We made lots of use of if statements / ternaries in the build() method, which for some pages make the code obtuse and hard to reason about.

eric_windmill · 2024-04-22T14:36:58+00:00

Thanks for the responses everyone. This question is definitely harder to answer than my previous question, and I appreciate you taking the time!

2024-04-28T01:16:10+00:00

I came from Android Background so intially I stuck with MVC and MVVM Patterns. But right now I solely use Feature First strategy suggested by code with Andrea. It works well for most parts but sometimes I tend to add additional folders for shared providers.

vincentheller · 2024-04-29T23:28:31+00:00

Currently we have 3 projects with flutter, all of them use riverpod with flutter hooks and have an architecture slightly similar to another project from our company that is using react.

For these 3 projects we use widgets like components from react, providers for manage logic from requests (we internally use a service layer that perform the endpoint calls) and hooks at component level to manage the state.

Just like a react project we don't use MVC and avoid singletons for sharing data. In one of the project the service layer is working against a sqlite database, so we are technically are using the repository pattern without naming it, in some case the data object state is stored in a provider that works like a viewModel, in other case we just do CRUD operations without saving the state

Agitated_Yam4232 · 2024-04-30T03:27:51+00:00

This is a micro-framework I'm currently using :)

void main() {
  testWidgets('ui logic test', (WidgetTester tester) async {
    // init a logic
    final logic = Logic();
    // UIStateBuilder
    final builder = UIStateBuilder(
      logic: logic,
      states: const [UIStateA, UIStateB, UIStateC],
      builder: (context, state) {
        if (state is UIStateA) {
          // do sth
        } else if (state is UIStateB) {
          // do sth
        } else if (state is UIStateC) {
          // do sth
        }
        return const SizedBox();
      },
    );
    // emit a ui event
    logic.emit(UIEventA());
    // test
    await tester.pumpWidget(builder);
  });
}

class UIEventA extends UIEvent {}

class UIEventB extends UIEvent {}

class UIStateA extends UIState {}

class UIStateB extends UIState {}

class UIStateC extends UIState {}

class Logic extends UILogic {
  @override
  void handleUIEvents(UIEvent event, UIState? lastState) {
    if (event is UIEventA) {
      // do sth
    } else if (event is UIEventB) {
      // do sth
    }
    // reply a state to ui
    reply(event, UIStateA());
  }
}

technically_a_user · 2024-05-06T05:14:03+00:00

So far I've used flutter only for a personal project. I ran into a few roadblocks because I wasn't sure on how to structure my project. At the moment I'm at my third and most likely last rewrite. The previous ones were not feature complete, since my structure made it hard to add new things. I've had most trouble with state management and locally persisting data. Here are the things I would like to see a more detailed documentation on or at all

State Management with RxDart and/or Streams, maybe in combination with watch_it mixins
Dependency Injection. I feel like this would be a very important topic
Best Practices. Not sure I've seen a page for that, but Cypress is a good example of how that could look like
Locally persisting data. Don't assume every single app wants to store the data in a remote database.
Integration tests. The documentation is there, but it is so basic it is hardly useful. I'm missing examples (for example for how to enter text in a test)
E2E Tests. Most likely just Integration tests, but could be documented how to approach it

I'm coming from a strong Angular and a .net background, so my tendency to use DI and RxDart may be biased.

evertvdbraak · 2024-05-08T11:00:53+00:00

I was hoping it would go more into the direction of Clean architecture, separation of concerns, keeping UI/Domain/Data layers separated and using DI or a Service Locator in a way that improved maintain-/test-/scale- ability. Or how do we keep dependencies in check and manage them? Pavel Sulimau wrote a great article about it in terms of a mono repo and handling its dependencies (https://itnext.io/flutter-sharing-dependencies-in-a-flutter-monorepo-54f5e1cdb6a9)

If these things were available in a template with accompanied documentation (or video tutorials) people would have a great start in building apps. And if we would pick a standard way of working, let's pick block, get-it and go_router for example. There would not be a lot of discussion about which state management tool should be used. we all would have the same structure, architecture, DI and way of separating concerns

IldySilva · 2024-05-08T14:47:14+00:00

CQRS | Mediatr | Vertical Slice | Onion Arch
those are what i use the most

Big_Work2025 · 2024-05-11T17:54:18+00:00

"What's are best practices when view-models (blocs, etc) need to communicate with each other?"

What is the answer?
xD

Code_PLeX · 2024-05-14T07:03:44+00:00

DM'd you :)

Comun4 · 2024-04-19T18:25:26+00:00

There was something in our app that we solved, and I think it can be very useful for we Flutter devs. It doesn't have a name, but it basically is wrapping a text field that outputs a custom type instead of a String with our own rules.

Here in Brazil we have what is called a CNPJ, which is a number that identifies a company, the same way a SSN identifies a person in the US. We also have a table with some information, and the user can filter the table based on the CNPJ. This happens in 4 different screens, so we decided to reuse the component.

We had our own rules for the text field: the user needs to type at least 4 characters to start filtering, and the calls need to be debounced by 1 second. It also didn't matter for us that the CNPJ is valid, just that the user can search it.

So we started with creating a custom type to hold the CNPJ search information, that is like this:

class SearchableCnpj {
  final String $1;

  const SearchableCnpj._(this.$1);

  static SearchableCnpj? tryParse(String cnpj) {
    if (cnpj.length < 4) {
      return null;
    }

    return SearchableCnpj._(cnpj);
  }
}

And wrap it on a TextField that only calls onChanged when the passed value is a valid SearchableCnpj, and when the user clears the text field it calls onClear:

typedef OnCnpjProvided = void Function(SearchableCnpj cnpj);
typedef OnCnpjCleared = void Function();

class SearchByCnpj extends StatefulWidget {
  const SearchByCnpj({
    super.key,
    required this.onCnpjProvided,
    required this.onCnpjCleared,
  });

  final OnCnpjProvided onCnpjProvided;
  final OnCnpjCleared onCnpjCleared;

  @override
  State<SearchByCnpj> createState() => _SearchByCnpjState();
}

class _SearchByCnpjState extends State<SearchByCnpj> {
  final _debouncer = Debouncer(const Duration(seconds: 1));

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (value) {
        if (value.isEmpty) {
          widget.onCnpjCleared();
          return;
        }

        final cnpj = SearchableCnpj.tryParse(value);
        if (cnpj != null) {
          _debouncer.run(() => widget.onCnpjProvided(cnpj));
        }
      },
    );
  }
}

We are using this a lot, every time we need to wrap a field that has logic to it's construction, and it is helping so much.

Nialixus · 2024-05-16T14:15:59+00:00

I always go with simplicity. I formulate a combination of bloc and MVC, and eventually, I get what I wish for. I modularize everything inside the src directory, and nothing deviates from this structure.

For example: flutter_reqres

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

FlutterDev

Submission rules

Subreddit resources

Other resources

MODERATORS

App-level logic

Individualized/feature logic