Programmierung

Lassen Sie uns wissen, wie Flutter Clean Architecture mit BLoC funktioniert

Inhaltsverzeichnis ausblenden 1 Clean Architecture besteht typischerweise aus den folgenden Schichten: 2 Hier ist ein Beispiel für eine Flutter-Projektstruktur, die folgt...

Geschrieben von Niel Patel · 7 min gelesen >
Flatter-Desktop-Leistung

Wenn Sie sich für einen sauberen Architekten entscheiden, bedeutet dies, dass Anwendungen mit geringer Kopplung, flexiblen und wartbaren Anwendungen unter Verwendung sauberer Architekturprinzipien zur Verfügung stehen. Dieser Ansatz ist ideal für Flutter-Entwickler und legt den Schwerpunkt auf die Schaffung architektonischer Grenzen, um Komponenten intrinsisch testbar zu machen. 

Aus diesem Grund ist Flatter-Clean-Architektur bei Entwicklern zum neuen Trend geworden. In diesem Artikel werden wir diese Architektur untersuchen und mehr darüber erfahren, wie sie bei der Verwaltung von Kundeninteraktionen oder der Nutzung von Flutter/Dart-Funktionen hilfreich ist. Dieses Projekt ist Ihr Weg zur Beherrschung sauberer Architektur in der App-Entwicklung.

Clean Architecture besteht typischerweise aus den folgenden Schichten:

Die Hauptidee von Clean Architecture besteht darin, die App in drei Schichten zu unterteilen: die Datenschicht, die Präsentationsschicht und die Themenschicht.

  1. Entitäten: Stellen Sie die Geschäftslogik und Datenentitäten der Anwendung dar.
  2. Anwendungsfälle (Interakteure): Enthalten die anwendungsspezifischen Geschäftsregeln und orchestrieren den Datenfluss zwischen den Entitäten und den äußeren Schichten.
  3. Repositorys: Schnittstelle für den Datenzugriff, die es den Anwendungsfällen ermöglicht, Daten abzurufen und zu speichern, ohne Rücksicht auf die eigentliche Datenquelle zu nehmen.
  4. Frameworks und Treiber: Äußerste Schicht, in der die Benutzeroberfläche, externe Frameworks und externe Systeme integriert sind.

Hier ist ein Beispiel für eine Flutter-Projektstruktur nach Clean Architecture:

/lib
|-- core
|   |-- entities
|   |-- usecases
|-- data
|   |-- repositories
|-- presentation
|   |-- screens
|   |-- widgets
|-- main.dart

Lassen Sie uns nun ein einfaches Beispiel mit Codeausschnitten bereitstellen.

// lib/core/entities/user.dart

class User {
  final String id;
  final String name;

  User({required this.id, required this.name});
}

Entities

// lib/core/entities/user.dart

class User {
  final String id;
  final String name;

  User({required this.id, required this.name});
}

Anwendungsfälle:

// lib/core/usecases/get_user_usecase.dart

import 'package:your_project/core/entities/user.dart';
import 'package:your_project/data/repositories/user_repository.dart';

class GetUserUseCase {
  final UserRepository userRepository;

  GetUserUseCase({required this.userRepository});

  Future<User> execute(String userId) async {
    return await userRepository.getUser(userId);
  }
}

Aufbewahrungsorte

// lib/data/repositories/user_repository.dart

import 'package:your_project/core/entities/user.dart';

abstract class UserRepository {
  Future<User> getUser(String userId);
}

Frameworks und Treiber:

// lib/presentation/screens/user_screen.dart

import 'package:flutter/material.dart';
import 'package:your_project/core/usecases/get_user_usecase.dart';

class UserScreen extends StatelessWidget {
  final GetUserUseCase getUserUseCase;

  UserScreen({required this.getUserUseCase});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Screen'),
      ),
      body: FutureBuilder(
        future: getUserUseCase.execute('user123'),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else {
            final user = snapshot.data as User;
            return Text('User Name: ${user.name}');
          }
        },
      ),
    );
  }
}

In diesem Beispiel ist der UserScreen eine Komponente, die zur äußeren Ebene gehört. Es verwendet GetUserUseCase, um einen Benutzer aus dem Repository abzurufen. Das Repository ist dafür verantwortlich, die Benutzerdaten von der realen Datenquelle abzurufen, bei der es sich um eine handeln könnte Datenbank, API, oder etwas ähnliches.

Was wird für die Flutter Clean Architecture verwendet?

In einem realen Szenario ist der obige Code die häufig verwendete Abhängigkeitsinjektion, z. B. das Anbieterpaket, um Ihre Abhängigkeiten zu verbinden. Dies ist nur ein vereinfachtes Beispiel zur Veranschaulichung des Konzepts. Darüber hinaus wäre es hilfreich, die Verwaltung von Fehlerzuständen zu verbessern und sicherzustellen, dass in den Anwendungsfällen und Repositories eine ordnungsgemäße Fehlerbehandlung implementiert ist.

Es kann viele Anwendungsfälle geben, die Entwickler haben sie jedoch in zwei Kategorien unterteilt. Das erste sind Kunden und das zweite sind Leads. 

Kunden: – In dieser Kategorie funktioniert die saubere Architektur auf der Kundenseite. 

  • Kunde erstellen: Neue Kunden hinzufügen.
  • Alle Kunden abrufen: Liste aller Kunden anzeigen.
  • Kundeninformationen aktualisieren: Kundendetails ändern.
  • Kunden aktiv/inaktiv machen: Ändern Sie den Status des Kunden.
  • Kunde löschen: Kundenprofile entfernen.

Leads (potenzielle Kunden): – In dieser Kategorie funktioniert die saubere Architektur auf der Kundenseite. 

  • Lead erstellen: Geben Sie neue potenzielle Kundendaten ein.
  • Alle Leads abrufen: Sehen Sie sich eine Liste aller Leads an.
  • Lead in Kunden umwandeln: Wandeln Sie einen Lead in einen registrierten Kunden um.
  • Lead-Informationen aktualisieren: Details von Leads bearbeiten.
  • Kundenaufgabe erstellen: Weisen Sie kundenbezogene Aufgaben zu.
  • Alle Aktivitäten für den Kunden abrufen: Alle Aufgaben und Aktivitäten für einen bestimmten Kunden anzeigen.
  • Diese Anwendungsfälle konzentrieren sich auf effiziente Kunden- und Führung führen, um sicherzustellen, dass die CRM-Anwendung benutzerfreundlich und anpassungsfähig ist.

Block Clean Architecture Flutter erklärt

Das BLoC (Business Logic Component) ist ein Muster, das zum Verwalten des Status in Flutter-Anwendungen verwendet wird. Wenn Sie es mit den Clean Architecture-Prinzipien kombinieren, können Sie verschiedene Belange innerhalb eines Flutter-Projekts besser organisieren und trennen. Sie können die Clean Architecture-Ebenen (Entitäten, Anwendungsfälle, Repositorys und Frameworks/Treiber) mit dem BLoC-Muster integrieren.

Lassen Sie uns ein einfaches Beispiel mit BLoC und Clean Architecture erstellen:

// lib/core/entities/user.dart

class User {
  final String id;
  final String name;

  User({required this.id, required this.name});
}

Entities

// lib/core/entities/user.dart

class User {
  final String id;
  final String name;

  User({required this.id, required this.name});
}

Anwendungsfälle:

// lib/core/usecases/get_user_usecase.dart

import 'package:your_project/core/entities/user.dart';
import 'package:your_project/data/repositories/user_repository.dart';

class GetUserUseCase {
  final UserRepository userRepository;

  GetUserUseCase({required this.userRepository});

  Future<User> execute(String userId) async {
    return await userRepository.getUser(userId);
  }
}

Aufbewahrungsorte

// lib/data/repositories/user_repository.dart

import 'package:your_project/core/entities/user.dart';

abstract class UserRepository {
  Future<User> getUser(String userId);
}

Block

// lib/presentation/bloc/user_bloc.dart

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:your_project/core/entities/user.dart';
import 'package:your_project/core/usecases/get_user_usecase.dart';
import 'package:equatable/equatable.dart';

part 'user_event.dart';
part 'user_state.dart';

class UserBloc extends Bloc<UserEvent, UserState> {
  final GetUserUseCase getUserUseCase;

  UserBloc({required this.getUserUseCase}) : super(UserInitial());

  @override
  Stream<UserState> mapEventToState(
    UserEvent event,
  ) async* {
    if (event is GetUserEvent) {
      yield UserLoading();
      try {
        final user = await getUserUseCase.execute(event.userId);
        yield UserLoaded(user: user);
      } catch (e) {
        yield UserError(error: e.toString());
      }
    }
  }
}

Ereignisse und Zustände:

// lib/presentation/bloc/user_event.dart

part of 'user_bloc.dart';

abstract class UserEvent extends Equatable {
  const UserEvent();

  @override
  List<Object> get props => [];
}

class GetUserEvent extends UserEvent {
  final String userId;

  GetUserEvent({required this.userId});

  @override
  List<Object> get props => [userId];
}
// lib/presentation/bloc/user_state.dart

part of 'user_bloc.dart';

abstract class UserState extends Equatable {
  const UserState();

  @override
  List<Object> get props => [];
}

class UserInitial extends UserState {}

class UserLoading extends UserState {}

class UserLoaded extends UserState {
  final User user;

  UserLoaded({required this.user});

  @override
  List<Object> get props => [user];
}

class UserError extends UserState {
  final String error;

  UserError({required this.error});

  @override
  List<Object> get props => [error];
}

UI (Präsentationsebene)

// lib/presentation/screens/user_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:your_project/presentation/bloc/user_bloc.dart';

class UserScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userBloc = BlocProvider.of<UserBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('User Screen'),
      ),
      body: BlocBuilder<UserBloc, UserState>(
        builder: (context, state) {
          if (state is UserLoading) {
            return CircularProgressIndicator();
          } else if (state is UserLoaded) {
            return Text('User Name: ${state.user.name}');
          } else if (state is UserError) {
            return Text('Error: ${state.error}');
          } else {
            return Text('No data');
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          userBloc.add(GetUserEvent(userId: 'user123'));
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

In diesem Beispiel kümmert sich das UserScreen-Widget um die Benutzeroberfläche. Es verwendet den UserBloc, um den Status zu verwalten und mit dem GetUserUseCase der Kernschicht zu kommunizieren. Das BLoC-Muster ist nützlich, um die Ebenen Benutzeroberfläche, Geschäftslogik und Datenzugriff getrennt und organisiert zu halten.

Stellen Sie sicher, dass Sie die erforderlichen Abhängigkeiten in Ihre Liste aufnehmen pubspec.yaml Datei:

dependencies:
  flutter:
    sdk: flutter
  equatable: ^2.0.3
  bloc: ^7.0.0
  flutter_bloc: ^7.0.0

Was zeichnet die Clean Architecture aus? 

Schauen wir uns diese an! 

Hervorragende Optionen für Ihre Websites: Sie erhalten empfohlene Strategien, um Ihre Pläne in wirksame Anwendungen umzusetzen.

Expertise in sauberer Architektur: Sie werden Unternehmen mit Spezialwissen haben, die informative und ansprechende Inhalte produzieren und Ihnen so die Oberhand in der Entwicklung verschaffen. 

Benutzerzentrierter Projektansatz: Konzentrieren Sie sich darauf, die Benutzerbedürfnisse nach relevanten Lösungen zu verstehen, sodass Sie sich nicht auf störende Inhalte konzentrieren müssen. 

Regelmäßige Updates und Engagement: Entwickler haben mehr Flexibilität, Kunden kontinuierlich über den Fortschritt zu informieren.

Kreatives Gestalten: Beauftragung künstlerischer Designer mit der Erstellung hochwertiger Schnittstellen.

Wechseln Sie zum Experten-Online-Marketing: Es unterstreicht die Bedeutung von professionellem Online-Marketing für eine effektive Werbung.

Mehrwertdienste für Wachstum: Online-Marketing-Dienstleistungen spielen eine entscheidende Rolle in der Organisationsentwicklung.

Herausforderungen im Online-Einzelhandel lösen: Es geht mit branchenspezifischen Marketingstrategien auf Fragestellungen im Online-Handel ein.

Grundsätze für effektive Einzelhandelssysteme: Außerdem hilft die saubere Architektur Entwicklern, wirksame Prinzipien für ein sicheres und risikoarmes Einzelhandels- und Zahlungssystem zu nutzen.

Warum Flutter mit kreativer und effektiver, sauberer Architektur meistern?

Wenn Sie sich online mit Flutter-Tools befassen, werden Sie auf alle Arten von Funktionen stoßen, mit denen Sie Ihr Projekt auf dem neuesten Stand halten und die Überprüfung der Ergebnisse ein Kinderspiel ist. Und wenn Sie Ihre Karten mit dieser sauberen Flutter-Architektur richtig ausspielen, könnte Ihre Website ganz oben in allen Suchmaschinen landen.

Außerdem ist es dadurch einfacher, die Website grenzüberschreitend zu bewerten. Außerdem verfügen Sie über eine Menge vielversprechender Funktionen, die Ihrer Website ein fantastisches Aussehen verleihen. Aber denken Sie daran, Sie müssen ein Team auswählen, bei dem es nicht nur ums Aussehen geht, sondern das sich auch auskennt. Diese Teams verfügen in der Regel über erstklassige Grafikdesigner, UI-Experten und kreative Köpfe, die Ihre Vision zum Leben erwecken.

Sobald Sie sich mit der Architektur vertraut gemacht haben, können Sie jederzeit Änderungen an Ihrer Website vornehmen und so deren Ablauf und Aussehen verbessern. Nach einigen kleinen Anpassungen hier und da präsentieren sie Ihnen anhand einiger cooler Modelle oder Layouts den endgültigen Look.

Die Vorteile der Flutter Clean-Architektur

Beim Eintauchen in Clean Architecture für Ihre Flutter-Projekte geht es nicht nur um guten Code. Vielmehr handelt es sich um einen strategischen Schachzug, der eine Reihe von Vorteilen mit sich bringt. Wenn Sie erwarten, dass Ihre Entwicklungsreise reibungslos verläuft, dann beginnen Sie hier. Obwohl es eine Fülle von Vorteilen bietet, wollen wir einige davon besprechen. 

Testbarkeit

Eine saubere Architektur verwandelt Ihre App in eine übersichtliche Reihe von Ebenen, von denen jede ihre eigene Aufgabe hat. Diese Trennung erleichtert Anfängern und erfahrenen Entwicklern das Testen. Sie können jede Ebene einzeln vergrößern und testen, wenn Änderungen an einer Stelle Ihre Tests an anderer Stelle nicht durcheinander bringen. Es ist, als hätte man einen ordentlich unterteilten Werkzeugkasten, in dem jedes Werkzeug unabhängig geschärft werden kann.

Codequalität und Unabhängigkeit

Clean Architecture in Flutter ist wie eine gut geölte Maschine; Jeder Teil arbeitet unabhängig und dennoch nahtlos zusammen. Dieses Setup macht Ihren Code nicht nur lesbarer und verständlicher, sondern erhöht auch die Wiederverwendbarkeit. Sie erhalten eine Codebasis, die nicht nur von hoher Qualität ist, sondern auch vielseitig, anpassungsfähig und bereit für alles, was Sie ihr in den Weg stellen.

Skalierbarkeit

Wenn Ihre Flutter-App wächst, ist es, als würden Sie einem Haus weitere Räume hinzufügen. Clean Architecture ist Ihr erfahrener Architekt. Es stellt sicher, dass jeder Neuzugang perfekt und ohne Chaos passt. Dieser organisierte Ansatz sorgt dafür, dass Ihre wachsende App reibungslos und überschaubar bleibt und vermeidet die typischen Wachstumsschwierigkeiten bei der App-Entwicklung.

Lesbarkeit und einfachere Wartung

Eine Codebasis, in der jeder Code seinen Platz kennt. Das bekommen Sie mit Clean Architecture. Für Entwickler ist es einfach, darin zu navigieren, Fehler zu beseitigen und coole neue Funktionen hinzuzufügen. Diese Klarheit reduziert den Zeit- und Arbeitsaufwand in der Wartungsphase. Es macht das Leben für alle Beteiligten viel einfacher.

Langfristige Effizienz

Sicher, die Einrichtung von Clean Architecture könnte sich am Anfang wie ein bisschen Mehrarbeit anfühlen. Aber betrachten Sie es als eine Investition. Langfristig bereiten Sie Ihr Projekt auf Erfolg vor. Dies ist besonders praktisch für große Projekte mit vielen beweglichen Teilen und Integrationen. Die anfängliche Einrichtungszeit wird durch die Effizienz und Verbesserungen, die Sie später erleben werden, in den Schatten gestellt.

Einpacken!

Das ist also alles über die saubere Flutter-Architektur. Wir hoffen, Sie haben einen Überblick darüber erhalten, wie großartig es für Entwickler ist und welche Rückschläge damit verbunden sind. In diesem Sinne vielen Dank, dass Sie diesen Leitfaden gelesen haben. 

Kartenspiel

Ist Unity nur für Spiele? 

Niel Patel in Programmierung
  ·   6 min gelesen

Hinterlassen Sie uns einen Kommentar

Translate »