Flutter-Vorlagen
Erstellen einer sozialen Netzwerk-App mit Flutter und Back4App

54min
Einführung
Die Erstellung einer Social-Networking-App kann eine komplexe Aufgabe sein, aber mit Flutter und Back4App können Sie den Entwicklungsprozess optimieren. Dieses Tutorial führt Sie durch den Aufbau einer voll funktionsfähigen Social-Networking-App, die Benutzerauthentifizierung, Profilverwaltung, Nachrichtenfeeds, Freundeverbindungen, Messaging und Benachrichtigungen umfasst.
Am Ende dieses Tutorials haben Sie eine funktionale Social-Networking-App mit den folgenden Funktionen:
Benutzerauthentifizierung: Sichere Anmelde- und Registrierungsprozesse.
Benutzerprofile: Bearbeitbare Profile mit Benutzerinformationen.
Nachrichtenfeeds: Anzeige von Beiträgen von Freunden und dem Benutzer.
Freundeverbindungen: Möglichkeit, Freundschaftsanfragen zu senden und zu akzeptieren.
Messaging: Echtzeit-Chat zwischen Benutzern.
Benachrichtigungen: Push-Benachrichtigungen für Freundschaftsanfragen, Nachrichten und Beitragsinteraktionen.
Voraussetzungen
Um diesem Tutorial zu folgen, benötigen Sie:
Flutter SDK auf Ihrem Computer installiert. Folgen Sie der offiziellen Flutter-Installationsanleitung für Ihr Betriebssystem.
Grundkenntnisse in Flutter und Dart. Wenn Sie neu bei Flutter sind, lesen Sie die Flutter-Dokumentation durch, um sich mit den Grundlagen vertraut zu machen.
Eine IDE oder einen Texteditor wie Visual Studio Code oder Android Studio.
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Parse Server SDK für Flutter in Ihr Projekt integriert. Erfahren Sie, wie Sie es einrichten, indem Sie die Back4App Flutter SDK-Anleitung befolgen.
Schritt 1 – Einrichten des Flutter-Projekts
1.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und führen Sie aus:
Bash
flutter create social_app
flutter create social_app
﻿
Navigiere zum Projektverzeichnis:
Bash
cd social_app
cd social_app
﻿
1.2. Abhängigkeiten hinzufügen
Öffne pubspec.yaml und füge die folgenden Abhängigkeiten hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  image_picker: ^0.8.4+6
  cached_network_image: ^3.2.0
  firebase_messaging: ^11.2.8
  uuid: ^3.0.6
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  image_picker: ^0.8.4+6
  cached_network_image: ^3.2.0
  firebase_messaging: ^11.2.8
  uuid: ^3.0.6
﻿
Führe flutter pub get aus, um die Pakete zu installieren.
Hinweis: Wir verwenden:
parse_server_sdk_flutter für die Back4App-Integration.
provider für das State Management.
image_picker zum Auswählen von Profil- und Beitragsbildern.
cached_network_image für effizientes Laden von Bildern.
firebase_messaging für Push-Benachrichtigungen.
uuid zur Generierung eindeutiger IDs.
Schritt 2 – Back4App einrichten
2.1. Erstellen Sie eine neue Back4App-Anwendung
Melden Sie sich bei Ihrem Back4App-Dashboard an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen Namen für Ihre Anwendung ein, z.B. "SocialApp", und klicken Sie auf "Erstellen".
2.2. Richten Sie die Datenmodelle ein
Wir müssen mehrere Klassen in Back4App erstellen:
Benutzer: Eingebaute Klasse für die Benutzerauthentifizierung.
Profil: Speichert Benutzerprofilinformationen.
Beitrag: Speichert Benutzerbeiträge.
Freundschaftsanfrage: Verwaltet Freundschaftsanfragen zwischen Benutzern.
Nachricht: Speichert Nachrichten zwischen Benutzern.
2.2.1. Profilklasse
Navigieren Sie zu der "Datenbank"-Sektion.
Klicken Sie auf "Klasse erstellen".
Im Modal:
Wählen Sie "Benutzerdefiniert".
Geben Sie "Profil" als Klassennamen ein.
Klicken Sie auf "Klasse erstellen".
Fügen Sie die folgenden Spalten hinzu:
Benutzer: Typ Pointer<_User>
Benutzername: Typ String
Vollständiger Name: Typ String
Biografie: Typ String
Profilbild: Typ Datei
2.2.2. Beitragsklasse
Erstellen Sie eine "Post"-Klasse mit den folgenden Spalten:
Benutzer: Typ Pointer<_User>
Inhalt: Typ String
Bild: Typ File
erstelltAm: Typ Date
2.2.3. FriendRequest-Klasse
Erstellen Sie eine "FriendRequest"-Klasse mit den folgenden Spalten:
vonBenutzer: Typ Pointer<_User>
zuBenutzer: Typ Pointer<_User>
Status: Typ String (Werte: "ausstehend", "akzeptiert", "abgelehnt")
2.2.4. Message-Klasse
Erstellen Sie eine "Message"-Klasse mit den folgenden Spalten:
vonBenutzer: Typ Pointer<_User>
zuBenutzer: Typ Pointer<_User>
Inhalt: Typ String
erstelltAm: Typ Date
2.3. Anwendungsanmeldeinformationen erhalten
Navigieren Sie zu App-Einstellungen > Sicherheit & Schlüssel.
Notieren Sie Ihre Anwendungs-ID und Client-Schlüssel.
Schritt 3 – Initialisierung von Parse in Ihrer Flutter-App
Öffnen Sie lib/main.dart und ändern Sie es wie folgt:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'services/auth_service.dart';
import 'screens/login_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AuthService>(
      create: (_) => AuthService(),
      child: MaterialApp(
        title: 'Social App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginScreen(),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'services/auth_service.dart';
import 'screens/login_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AuthService>(
      create: (_) => AuthService(),
      child: MaterialApp(
        title: 'Social App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginScreen(),
      ),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_APPLICATION_ID' und 'YOUR_CLIENT_KEY' durch Ihre Back4App-Anmeldeinformationen.
Wir verwenden ChangeNotifierProvider zur Verwaltung des Authentifizierungsstatus.
Schritt 4 – Implementierung der Benutzeranmeldung
4.1. Erstellen Sie den Authentifizierungsdienst
Erstellen Sie ein neues Verzeichnis mit dem Namen services unter lib und fügen Sie eine Datei mit dem Namen auth_service.dart:
Dart
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);

    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);

    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);

    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);

    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
﻿
4.2. Erstellen Sie die Anmelde- und Registrierungsbildschirme
Erstellen Sie ein Verzeichnis mit dem Namen screens unter lib und fügen Sie login_screen.dart und signup_screen.dart, hinzu.
4.2.1. Anmeldescreen
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'signup_screen.dart';
import 'home_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _login, child: Text('Login')),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'signup_screen.dart';
import 'home_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _login, child: Text('Login')),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
4.2.2. Registrierungsbildschirm
Dart
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatefulWidget {
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  void _signUp() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatefulWidget {
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  void _signUp() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
          ],
        ),
      ),
    );
  }
}
﻿
Schritt 5 – Benutzerprofile einrichten
5.1. Profilservice erstellen
Fügen Sie eine Datei mit dem Namen profile_service.dart unter lib/services/:
Dart
// lib/services/profile_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/profile.dart';

class ProfileService {
  Future<void> createProfile(ParseUser user) async {
    final profile = ParseObject('Profile')
      ..set('user', user)
      ..set('username', user.username);

    await profile.save();
  }

  Future<Profile?> getProfile(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Profile'))
      ..whereEqualTo('user', user);

    final response = await query.query();

    if (response.success && response.results != null) {
      final profileObject = response.results!.first;
      return Profile.fromParseObject(profileObject);
    } else {
      return null;
    }
  }

  Future<void> updateProfile(Profile profile) async {
    final profileObject = ParseObject('Profile')
      ..objectId = profile.id
      ..set('fullName', profile.fullName)
      ..set('bio', profile.bio);

    await profileObject.save();
  }
}
// lib/services/profile_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/profile.dart';

class ProfileService {
  Future<void> createProfile(ParseUser user) async {
    final profile = ParseObject('Profile')
      ..set('user', user)
      ..set('username', user.username);

    await profile.save();
  }

  Future<Profile?> getProfile(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Profile'))
      ..whereEqualTo('user', user);

    final response = await query.query();

    if (response.success && response.results != null) {
      final profileObject = response.results!.first;
      return Profile.fromParseObject(profileObject);
    } else {
      return null;
    }
  }

  Future<void> updateProfile(Profile profile) async {
    final profileObject = ParseObject('Profile')
      ..objectId = profile.id
      ..set('fullName', profile.fullName)
      ..set('bio', profile.bio);

    await profileObject.save();
  }
}
﻿
5.2. Profilmodell erstellen
Fügen Sie eine Datei mit dem Namen profile.dart unter lib/models/:
Dart
// lib/models/profile.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Profile {
  String id;
  String username;
  String? fullName;
  String? bio;
  ParseFileBase? profilePicture;

  Profile({
    required this.id,
    required this.username,
    this.fullName,
    this.bio,
    this.profilePicture,
  });

  factory Profile.fromParseObject(ParseObject object) {
    return Profile(
      id: object.objectId!,
      username: object.get<String>('username')!,
      fullName: object.get<String>('fullName'),
      bio: object.get<String>('bio'),
      profilePicture: object.get<ParseFileBase>('profilePicture'),
    );
  }
}
// lib/models/profile.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Profile {
  String id;
  String username;
  String? fullName;
  String? bio;
  ParseFileBase? profilePicture;

  Profile({
    required this.id,
    required this.username,
    this.fullName,
    this.bio,
    this.profilePicture,
  });

  factory Profile.fromParseObject(ParseObject object) {
    return Profile(
      id: object.objectId!,
      username: object.get<String>('username')!,
      fullName: object.get<String>('fullName'),
      bio: object.get<String>('bio'),
      profilePicture: object.get<ParseFileBase>('profilePicture'),
    );
  }
}
﻿
5.3. Profilbildschirm erstellen
Fügen Sie eine Datei mit dem Namen profile_screen.dart unter lib/screens/:
Dart
// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/profile_service.dart';
import '../models/profile.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final ProfileService _profileService = ProfileService();
  Profile? profile;
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _bioController = TextEditingController();

  void _loadProfile() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    Profile? fetchedProfile = await _profileService.getProfile(user);

    if (fetchedProfile == null) {
      await _profileService.createProfile(user);
      fetchedProfile = await _profileService.getProfile(user);
    }

    setState(() {
      profile = fetchedProfile;
      _fullNameController.text = profile?.fullName ?? '';
      _bioController.text = profile?.bio ?? '';
    });
  }

  void _saveProfile() async {
    if (profile != null) {
      profile!.fullName = _fullNameController.text.trim();
      profile!.bio = _bioController.text.trim();
      await _profileService.updateProfile(profile!);
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Profile updated')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadProfile();
  }

  @override
  Widget build(BuildContext context) {
    if (profile == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(profile!.username)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Add profile picture handling here
            TextField(
              controller: _fullNameController,
              decoration: InputDecoration(labelText: 'Full Name'),
            ),
            TextField(
              controller: _bioController,
              decoration: InputDecoration(labelText: 'Bio'),
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _saveProfile, child: Text('Save')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/profile_service.dart';
import '../models/profile.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final ProfileService _profileService = ProfileService();
  Profile? profile;
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _bioController = TextEditingController();

  void _loadProfile() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    Profile? fetchedProfile = await _profileService.getProfile(user);

    if (fetchedProfile == null) {
      await _profileService.createProfile(user);
      fetchedProfile = await _profileService.getProfile(user);
    }

    setState(() {
      profile = fetchedProfile;
      _fullNameController.text = profile?.fullName ?? '';
      _bioController.text = profile?.bio ?? '';
    });
  }

  void _saveProfile() async {
    if (profile != null) {
      profile!.fullName = _fullNameController.text.trim();
      profile!.bio = _bioController.text.trim();
      await _profileService.updateProfile(profile!);
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Profile updated')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadProfile();
  }

  @override
  Widget build(BuildContext context) {
    if (profile == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(profile!.username)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Add profile picture handling here
            TextField(
              controller: _fullNameController,
              decoration: InputDecoration(labelText: 'Full Name'),
            ),
            TextField(
              controller: _bioController,
              decoration: InputDecoration(labelText: 'Bio'),
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _saveProfile, child: Text('Save')),
          ],
        ),
      ),
    );
  }
}
﻿
Schritt 6 – Implementierung von Nachrichten-Feeds
6.1. Erstelle Post-Service
Fügen Sie eine Datei mit dem Namen post_service.dart unter lib/services/:
Dart
// lib/services/post_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/post.dart';

class PostService {
  Future<void> createPost(String content, ParseUser user) async {
    final post = ParseObject('Post')
      ..set('user', user)
      ..set('content', content);

    await post.save();
  }

  Future<List<Post>> getPosts(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Post'))
      ..orderByDescending('createdAt')
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results!.map((e) => Post.fromParseObject(e)).toList();
    } else {
      return [];
    }
  }
}
// lib/services/post_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/post.dart';

class PostService {
  Future<void> createPost(String content, ParseUser user) async {
    final post = ParseObject('Post')
      ..set('user', user)
      ..set('content', content);

    await post.save();
  }

  Future<List<Post>> getPosts(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Post'))
      ..orderByDescending('createdAt')
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results!.map((e) => Post.fromParseObject(e)).toList();
    } else {
      return [];
    }
  }
}
﻿
6.2. Erstelle Post-Modell
Fügen Sie eine Datei mit dem Namen post.dart unter lib/models/:
Dart
// lib/models/post.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Post {
  String id;
  String content;
  ParseUser user;
  DateTime createdAt;

  Post({
    required this.id,
    required this.content,
    required this.user,
    required this.createdAt,
  });

  factory Post.fromParseObject(ParseObject object) {
    return Post(
      id: object.objectId!,
      content: object.get<String>('content')!,
      user: object.get<ParseUser>('user')!,
      createdAt: object.createdAt!,
    );
  }
}
// lib/models/post.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Post {
  String id;
  String content;
  ParseUser user;
  DateTime createdAt;

  Post({
    required this.id,
    required this.content,
    required this.user,
    required this.createdAt,
  });

  factory Post.fromParseObject(ParseObject object) {
    return Post(
      id: object.objectId!,
      content: object.get<String>('content')!,
      user: object.get<ParseUser>('user')!,
      createdAt: object.createdAt!,
    );
  }
}
﻿
6.3. Erstellen Sie den Startbildschirm
Ändern Sie home_screen.dart unter lib/screens/:
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/post_service.dart';
import '../models/post.dart';
import 'profile_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final PostService _postService = PostService();
  List<Post> posts = [];
  final TextEditingController _postController = TextEditingController();

  void _loadPosts() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    List<Post> fetchedPosts = await _postService.getPosts(user);

    setState(() {
      posts = fetchedPosts;
    });
  }

  void _createPost() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    await _postService.createPost(_postController.text.trim(), user);
    _postController.clear();
    _loadPosts();
  }

  @override
  void initState() {
    super.initState();
    _loadPosts();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App'),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => ProfileScreen()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await authService.logout();
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
        ],
      ),
      body: Column(
        children: [
          TextField(
            controller: _postController,
            decoration: InputDecoration(
              hintText: 'What\'s on your mind?',
              contentPadding: EdgeInsets.all(16),
            ),
          ),
          ElevatedButton(onPressed: _createPost, child: Text('Post')),
          Expanded(
            child: ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return ListTile(
                  title: Text(post.user.username ?? 'Unknown'),
                  subtitle: Text(post.content),
                  trailing: Text(
                    post.createdAt.toLocal().toString(),
                    style: TextStyle(fontSize: 12),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/post_service.dart';
import '../models/post.dart';
import 'profile_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final PostService _postService = PostService();
  List<Post> posts = [];
  final TextEditingController _postController = TextEditingController();

  void _loadPosts() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    List<Post> fetchedPosts = await _postService.getPosts(user);

    setState(() {
      posts = fetchedPosts;
    });
  }

  void _createPost() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    await _postService.createPost(_postController.text.trim(), user);
    _postController.clear();
    _loadPosts();
  }

  @override
  void initState() {
    super.initState();
    _loadPosts();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App'),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => ProfileScreen()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await authService.logout();
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
        ],
      ),
      body: Column(
        children: [
          TextField(
            controller: _postController,
            decoration: InputDecoration(
              hintText: 'What\'s on your mind?',
              contentPadding: EdgeInsets.all(16),
            ),
          ),
          ElevatedButton(onPressed: _createPost, child: Text('Post')),
          Expanded(
            child: ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return ListTile(
                  title: Text(post.user.username ?? 'Unknown'),
                  subtitle: Text(post.content),
                  trailing: Text(
                    post.createdAt.toLocal().toString(),
                    style: TextStyle(fontSize: 12),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Schritt 7 – Freundesverbindungen hinzufügen
In diesem Schritt werden wir Freundschaftsverbindungen zwischen Benutzern implementieren. Benutzer können Freundschaftsanfragen senden, diese annehmen oder ablehnen und ihre Freundesliste einsehen. Wir werden die Datenmodelle ändern, Dienste erstellen und die Benutzeroberfläche aktualisieren, um diese Funktionalität zu unterstützen.
7.1. Aktualisierung des Datenmodells
Wir haben bereits die FriendRequest-Klasse in Back4App mit den folgenden Spalten erstellt:
fromUser: Zeiger auf _User
toUser: Zeiger auf _User
status: Zeichenfolge (Werte: "pending", "accepted", "rejected")
Zusätzlich müssen wir die Freundesliste eines Benutzers verfolgen. Wir können dies tun, indem wir eine friends-Beziehung in der _User-Klasse hinzufügen.
7.1.1. Freundesbeziehung zur Benutzerklasse hinzufügen
Gehe in Back4App zur User-Klasse.
Klicke auf die "+"-Schaltfläche, um eine neue Spalte hinzuzufügen.
Benenne die Spalte "friends" und setze den Typ auf Relation <_User>.
7.2. Erstelle einen Freundschaftsanfrage-Service
Erstelle eine Datei mit dem Namen friend_service.dart unter lib/services/:
Dart
// lib/services/friend_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class FriendService {
  Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
    final friendRequest = ParseObject('FriendRequest')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('status', 'pending');

    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseObject>> getPendingRequests(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('FriendRequest'))
      ..whereEqualTo('toUser', user)
      ..whereEqualTo('status', 'pending')
      ..includeObject(['fromUser']);

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!;
    } else {
      return [];
    }
  }

  Future<bool> acceptFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'accepted');
    final response = await friendRequest.save();

    if (response.success) {
      // Add each user to the other's friends relation
      final fromUser = friendRequest.get<ParseUser>('fromUser')!;
      final toUser = friendRequest.get<ParseUser>('toUser')!;

      fromUser.setAdd('friends', [toUser]);
      toUser.setAdd('friends', [fromUser]);

      await fromUser.save();
      await toUser.save();

      return true;
    }
    return false;
  }

  Future<bool> rejectFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'rejected');
    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseUser>> getFriends(ParseUser user) async {
    final relation = user.getRelation<ParseUser>('friends');
    final query = relation.query();

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!.cast<ParseUser>();
    } else {
      return [];
    }
  }
}
// lib/services/friend_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class FriendService {
  Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
    final friendRequest = ParseObject('FriendRequest')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('status', 'pending');

    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseObject>> getPendingRequests(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('FriendRequest'))
      ..whereEqualTo('toUser', user)
      ..whereEqualTo('status', 'pending')
      ..includeObject(['fromUser']);

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!;
    } else {
      return [];
    }
  }

  Future<bool> acceptFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'accepted');
    final response = await friendRequest.save();

    if (response.success) {
      // Add each user to the other's friends relation
      final fromUser = friendRequest.get<ParseUser>('fromUser')!;
      final toUser = friendRequest.get<ParseUser>('toUser')!;

      fromUser.setAdd('friends', [toUser]);
      toUser.setAdd('friends', [fromUser]);

      await fromUser.save();
      await toUser.save();

      return true;
    }
    return false;
  }

  Future<bool> rejectFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'rejected');
    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseUser>> getFriends(ParseUser user) async {
    final relation = user.getRelation<ParseUser>('friends');
    final query = relation.query();

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!.cast<ParseUser>();
    } else {
      return [];
    }
  }
}
﻿
7.3. Aktualisieren Sie die Benutzeroberfläche
7.3.1. Benutzer suchen Bildschirm hinzufügen
Erstellen Sie eine Datei mit dem Namen search_users_screen.dart unter lib/screens/:
Dart
// lib/screens/search_users_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class SearchUsersScreen extends StatefulWidget {
  @override
  _SearchUsersScreenState createState() => _SearchUsersScreenState();
}

class _SearchUsersScreenState extends State<SearchUsersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<ParseUser> users = [];
  final FriendService _friendService = FriendService();

  void _searchUsers() async {
    final query = QueryBuilder<ParseUser>(ParseUser.forQuery())
      ..whereContains('username', _searchController.text.trim())
      ..whereNotEqualTo('objectId', Provider.of<AuthService>(context, listen: false).user!.objectId);

    final response = await query.query();
    if (response.success && response.results != null) {
      setState(() {
        users = response.results!.cast<ParseUser>();
      });
    } else {
      setState(() {
        users = [];
      });
    }
  }

  void _sendFriendRequest(ParseUser toUser) async {
    final fromUser = Provider.of<AuthService>(context, listen: false).user!;
    bool success = await _friendService.sendFriendRequest(fromUser, toUser);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request sent')));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to send friend request')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Users'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search by username',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchUsers,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.username ?? 'Unknown'),
                  trailing: ElevatedButton(
                    onPressed: () => _sendFriendRequest(user),
                    child: Text('Add Friend'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/search_users_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class SearchUsersScreen extends StatefulWidget {
  @override
  _SearchUsersScreenState createState() => _SearchUsersScreenState();
}

class _SearchUsersScreenState extends State<SearchUsersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<ParseUser> users = [];
  final FriendService _friendService = FriendService();

  void _searchUsers() async {
    final query = QueryBuilder<ParseUser>(ParseUser.forQuery())
      ..whereContains('username', _searchController.text.trim())
      ..whereNotEqualTo('objectId', Provider.of<AuthService>(context, listen: false).user!.objectId);

    final response = await query.query();
    if (response.success && response.results != null) {
      setState(() {
        users = response.results!.cast<ParseUser>();
      });
    } else {
      setState(() {
        users = [];
      });
    }
  }

  void _sendFriendRequest(ParseUser toUser) async {
    final fromUser = Provider.of<AuthService>(context, listen: false).user!;
    bool success = await _friendService.sendFriendRequest(fromUser, toUser);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request sent')));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to send friend request')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Users'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search by username',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchUsers,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.username ?? 'Unknown'),
                  trailing: ElevatedButton(
                    onPressed: () => _sendFriendRequest(user),
                    child: Text('Add Friend'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
7.3.2. Freundschaftsanfragen Bildschirm
Erstellen Sie eine Datei mit dem Namen friend_requests_screen.dart unter lib/screens/:
Dart
// lib/screens/friend_requests_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class FriendRequestsScreen extends StatefulWidget {
  @override
  _FriendRequestsScreenState createState() => _FriendRequestsScreenState();
}

class _FriendRequestsScreenState extends State<FriendRequestsScreen> {
  final FriendService _friendService = FriendService();
  List<ParseObject> friendRequests = [];

  void _loadFriendRequests() async {
    final user = Provider.of<AuthService>(context, listen: false).user!;
    final requests = await _friendService.getPendingRequests(user);
    setState(() {
      friendRequests = requests;
    });
  }

  void _acceptRequest(ParseObject request) async {
    bool success = await _friendService.acceptFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request accepted')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to accept friend request')));
    }
  }

  void _rejectRequest(ParseObject request) async {
    bool success = await _friendService.rejectFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request rejected')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to reject friend request')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadFriendRequests();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Friend Requests'),
      ),
      body: ListView.builder(
        itemCount: friendRequests.length,
        itemBuilder: (context, index) {
          final request = friendRequests[index];
          final fromUser = request.get<ParseUser>('fromUser')!;
          return ListTile(
            title: Text(fromUser.username ?? 'Unknown'),
            subtitle: Text('Sent you a friend request'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.check, color: Colors.green),
                  onPressed: () => _acceptRequest(request),
                ),
                IconButton(
                  icon: Icon(Icons.close, color: Colors.red),
                  onPressed: () => _rejectRequest(request),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
// lib/screens/friend_requests_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class FriendRequestsScreen extends StatefulWidget {
  @override
  _FriendRequestsScreenState createState() => _FriendRequestsScreenState();
}

class _FriendRequestsScreenState extends State<FriendRequestsScreen> {
  final FriendService _friendService = FriendService();
  List<ParseObject> friendRequests = [];

  void _loadFriendRequests() async {
    final user = Provider.of<AuthService>(context, listen: false).user!;
    final requests = await _friendService.getPendingRequests(user);
    setState(() {
      friendRequests = requests;
    });
  }

  void _acceptRequest(ParseObject request) async {
    bool success = await _friendService.acceptFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request accepted')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to accept friend request')));
    }
  }

  void _rejectRequest(ParseObject request) async {
    bool success = await _friendService.rejectFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request rejected')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to reject friend request')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadFriendRequests();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Friend Requests'),
      ),
      body: ListView.builder(
        itemCount: friendRequests.length,
        itemBuilder: (context, index) {
          final request = friendRequests[index];
          final fromUser = request.get<ParseUser>('fromUser')!;
          return ListTile(
            title: Text(fromUser.username ?? 'Unknown'),
            subtitle: Text('Sent you a friend request'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.check, color: Colors.green),
                  onPressed: () => _acceptRequest(request),
                ),
                IconButton(
                  icon: Icon(Icons.close, color: Colors.red),
                  onPressed: () => _rejectRequest(request),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
﻿
7.3.3. Aktualisieren Sie die Navigation des Startbildschirms
In home_screen.dart, fügen Sie die Navigation zu den Bildschirmen für die Benutzersuche und die Freundschaftsanfragen hinzu:
Dart
// Inside AppBar actions
IconButton(
  icon: Icon(Icons.person_add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SearchUsersScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.notifications),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => FriendRequestsScreen()),
    );
  },
),
// Inside AppBar actions
IconButton(
  icon: Icon(Icons.person_add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SearchUsersScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.notifications),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => FriendRequestsScreen()),
    );
  },
),
﻿
7.4. Aktualisieren Sie den News Feed, um die Beiträge von Freunden anzuzeigen
Ändern Sie die getPosts Methode in post_service.dart um Beiträge vom Benutzer und seinen Freunden abzurufen.
Dart
// lib/services/post_service.dart
Future<List<Post>> getPosts(ParseUser user) async {
  // Get friends
  final relation = user.getRelation<ParseUser>('friends');
  final friendsQuery = relation.query();

  final friendsResponse = await friendsQuery.query();

  List<String> userIds = [user.objectId!];
  if (friendsResponse.success && friendsResponse.results != null) {
    final friends = friendsResponse.results!.cast<ParseUser>();
    userIds.addAll(friends.map((friend) => friend.objectId!));
  }

  // Fetch posts from user and friends
  final query = QueryBuilder<ParseObject>(ParseObject('Post'))
    ..whereContainedIn('user', userIds.map((id) => ParseUser(null, null, null)..objectId = id).toList())
    ..orderByDescending('createdAt')
    ..includeObject(['user']);

  final response = await query.query();

  if (response.success && response.results != null) {
    return response.results!.map((e) => Post.fromParseObject(e)).toList();
  } else {
    return [];
  }
}
// lib/services/post_service.dart
Future<List<Post>> getPosts(ParseUser user) async {
  // Get friends
  final relation = user.getRelation<ParseUser>('friends');
  final friendsQuery = relation.query();

  final friendsResponse = await friendsQuery.query();

  List<String> userIds = [user.objectId!];
  if (friendsResponse.success && friendsResponse.results != null) {
    final friends = friendsResponse.results!.cast<ParseUser>();
    userIds.addAll(friends.map((friend) => friend.objectId!));
  }

  // Fetch posts from user and friends
  final query = QueryBuilder<ParseObject>(ParseObject('Post'))
    ..whereContainedIn('user', userIds.map((id) => ParseUser(null, null, null)..objectId = id).toList())
    ..orderByDescending('createdAt')
    ..includeObject(['user']);

  final response = await query.query();

  if (response.success && response.results != null) {
    return response.results!.map((e) => Post.fromParseObject(e)).toList();
  } else {
    return [];
  }
}
﻿
Schritt 8 – Implementierung der Nachrichtenübermittlung
In diesem Schritt fügen wir eine Echtzeitkommunikation zwischen Benutzern mit Live-Abfragen hinzu.
8.1. Live-Abfragen in Back4App aktivieren
Gehe in deinem Back4App-App-Dashboard zu App-Einstellungen > Servereinstellungen.
Unter Server-URL, notiere dir deine Server-URL (z.B. https://YOUR_APP_NAME.back4app.io).
Live-Abfragen sind standardmäßig in Back4App aktiviert.
8.2. Live-Abfragen in Flutter einrichten
Das parse_server_sdk_flutter-Paket enthält Unterstützung für Live-Abfragen.
8.3. Messaging-Dienst erstellen
Erstelle eine Datei mit dem Namen message_service.dart unter lib/services/:
Dart
// lib/services/message_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/message.dart';

class MessageService {
  ParseLiveList<Message>? liveMessageList;

  Future<void> sendMessage(ParseUser fromUser, ParseUser toUser, String content) async {
    final message = ParseObject('Message')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('content', content);

    await message.save();
  }

  Future<void> subscribeToMessages(ParseUser user, ParseUser otherUser, Function(List<Message>) onMessagesUpdated) async {
    final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Message'))
      ..whereEqualTo('fromUser', user)
      ..whereEqualTo('toUser', otherUser)
      ..orderByAscending('createdAt')
      ..includeObject(['fromUser', 'toUser']);

    liveMessageList = ParseLiveList<Message>(queryBuilder, listenOnAllSubItems: true);

    liveMessageList!.stream.listen((event) {
      onMessagesUpdated(liveMessageList!.items);
    });
  }

  Future<void> dispose() async {
    await liveMessageList?.dispose();
  }
}
// lib/services/message_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/message.dart';

class MessageService {
  ParseLiveList<Message>? liveMessageList;

  Future<void> sendMessage(ParseUser fromUser, ParseUser toUser, String content) async {
    final message = ParseObject('Message')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('content', content);

    await message.save();
  }

  Future<void> subscribeToMessages(ParseUser user, ParseUser otherUser, Function(List<Message>) onMessagesUpdated) async {
    final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Message'))
      ..whereEqualTo('fromUser', user)
      ..whereEqualTo('toUser', otherUser)
      ..orderByAscending('createdAt')
      ..includeObject(['fromUser', 'toUser']);

    liveMessageList = ParseLiveList<Message>(queryBuilder, listenOnAllSubItems: true);

    liveMessageList!.stream.listen((event) {
      onMessagesUpdated(liveMessageList!.items);
    });
  }

  Future<void> dispose() async {
    await liveMessageList?.dispose();
  }
}
﻿
8.4. Nachrichtenmodell erstellen
Füge eine Datei mit dem Namen message.dart unter lib/models/:
Dart
// lib/models/message.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Message extends ParseObject implements ParseCloneable {
  Message() : super('Message');

  Message.clone() : this();

  @override
  clone(Map<String, dynamic> map) => Message.clone()..fromJson(map);

  ParseUser get fromUser => get<ParseUser>('fromUser')!;
  ParseUser get toUser => get<ParseUser>('toUser')!;
  String get content => get<String>('content')!;
}
// lib/models/message.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Message extends ParseObject implements ParseCloneable {
  Message() : super('Message');

  Message.clone() : this();

  @override
  clone(Map<String, dynamic> map) => Message.clone()..fromJson(map);

  ParseUser get fromUser => get<ParseUser>('fromUser')!;
  ParseUser get toUser => get<ParseUser>('toUser')!;
  String get content => get<String>('content')!;
}
﻿
8.5. Erstelle den Chat-Bildschirm
Fügen Sie eine Datei mit dem Namen chat_screen.dart unter lib/screens/:
Dart
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../models/message.dart';
import '../services/auth_service.dart';
import '../services/message_service.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser otherUser;

  ChatScreen({required this.otherUser});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final MessageService _messageService = MessageService();
  List<Message> messages = [];
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    final authService = Provider.of<AuthService>(context, listen: false);
    final fromUser = authService.user!;
    final toUser = widget.otherUser;

    _messageService.sendMessage(fromUser, toUser, _messageController.text.trim());
    _messageController.clear();
  }

  void _onMessagesUpdated(List<Message> updatedMessages) {
    setState(() {
      messages = updatedMessages;
    });
  }

  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    _messageService.subscribeToMessages(user, widget.otherUser, _onMessagesUpdated);
  }

  @override
  void dispose() {
    _messageService.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;

    return Scaffold(
      appBar: AppBar(title: Text(widget.otherUser.username ?? 'Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: messages.map((message) {
                bool isMe = message.fromUser.objectId == user.objectId;
                return ListTile(
                  title: Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: isMe ? Colors.blueAccent : Colors.grey[300],
                      child: Text(
                        message.content,
                        style: TextStyle(color: isMe ? Colors.white : Colors.black),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            color: Theme.of(context).cardColor,
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration.collapsed(hintText: 'Send a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../models/message.dart';
import '../services/auth_service.dart';
import '../services/message_service.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser otherUser;

  ChatScreen({required this.otherUser});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final MessageService _messageService = MessageService();
  List<Message> messages = [];
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    final authService = Provider.of<AuthService>(context, listen: false);
    final fromUser = authService.user!;
    final toUser = widget.otherUser;

    _messageService.sendMessage(fromUser, toUser, _messageController.text.trim());
    _messageController.clear();
  }

  void _onMessagesUpdated(List<Message> updatedMessages) {
    setState(() {
      messages = updatedMessages;
    });
  }

  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    _messageService.subscribeToMessages(user, widget.otherUser, _onMessagesUpdated);
  }

  @override
  void dispose() {
    _messageService.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;

    return Scaffold(
      appBar: AppBar(title: Text(widget.otherUser.username ?? 'Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: messages.map((message) {
                bool isMe = message.fromUser.objectId == user.objectId;
                return ListTile(
                  title: Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: isMe ? Colors.blueAccent : Colors.grey[300],
                      child: Text(
                        message.content,
                        style: TextStyle(color: isMe ? Colors.white : Colors.black),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            color: Theme.of(context).cardColor,
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration.collapsed(hintText: 'Send a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
﻿
8.6. Benutzeroberfläche aktualisieren, um den Chat zu starten
Sie können den Chat von der Freundesliste oder dem Bildschirm zur Benutzersuche aus starten.
In der Freundesliste, wenn Freunde angezeigt werden, fügen Sie eine Schaltfläche hinzu, um einen Chat zu starten:
Dart
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
﻿
Schritt 9 – Push-Benachrichtigungen hinzufügen
Die Implementierung von Push-Benachrichtigungen umfasst die Einrichtung von Firebase Cloud Messaging (FCM) und die Integration mit Back4App.
9.1. Firebase Cloud Messaging konfigurieren
9.1.1. Firebase-Projekt einrichten
Gehe zu Firebase Console und erstelle ein neues Projekt.
Füge eine Android- und/oder iOS-App zu deinem Projekt hinzu.
Für Android benötigst du den Paketnamen (applicationId).
Für iOS benötigst du die Bundle-ID.
9.1.2. Konfigurationsdateien herunterladen
Für Android: Lade google-services.json herunter und platziere es in android/app/.
Für iOS: Lade GoogleService-Info.plist herunter und füge es deinem Xcode-Projekt unter Runner hinzu.
9.2. firebase_messaging Paket hinzufügen
Stelle sicher, dass du firebase_messaging zu deiner pubspec.yaml:
YAML
dependencies:
  firebase_messaging: ^11.2.8
dependencies:
  firebase_messaging: ^11.2.8
﻿
Führe flutter pub get aus, um zu installieren.
9.3. Firebase in Flutter initialisieren
Ändern Sie main.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:firebase_core/firebase_core.dart';
// Other imports

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:firebase_core/firebase_core.dart';
// Other imports

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  runApp(MyApp());
}
﻿
9.4. Firebase Messaging konfigurieren
Erstellen Sie eine Datei mit dem Namen push_notification_service.dart unter lib/services/:
Dart
// lib/services/push_notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging.instance;

  Future<void> init() async {
    // Request permissions (iOS)
    await _fcm.requestPermission();

    // Get the token
    String? token = await _fcm.getToken();

    if (token != null) {
      // Save the token to Parse Installation
      final installation = await ParseInstallation.currentInstallation();
      installation.set('deviceToken', token);
      await installation.save();
    }

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message in the foreground!');
      // Handle the message
    });
  }
}
// lib/services/push_notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging.instance;

  Future<void> init() async {
    // Request permissions (iOS)
    await _fcm.requestPermission();

    // Get the token
    String? token = await _fcm.getToken();

    if (token != null) {
      // Save the token to Parse Installation
      final installation = await ParseInstallation.currentInstallation();
      installation.set('deviceToken', token);
      await installation.save();
    }

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message in the foreground!');
      // Handle the message
    });
  }
}
﻿
9.5. Aktualisieren Sie main.dart um Push-Benachrichtigungen zu initialisieren
In main.dart, nach der Initialisierung von Parse, initialisieren Sie den PushNotificationService:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  // Initialize Push Notifications
  PushNotificationService _pushNotificationService = PushNotificationService();
  await _pushNotificationService.init();

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  // Initialize Push Notifications
  PushNotificationService _pushNotificationService = PushNotificationService();
  await _pushNotificationService.init();

  runApp(MyApp());
}
﻿
9.6. Push-Benachrichtigungen von Back4App senden
Sie können Push-Benachrichtigungen mit Cloud Code oder direkt von Ihrem Server aus senden.
9.6.1. Benachrichtigung bei Freundschaftsanfrage senden
Wenn ein Benutzer eine Freundschaftsanfrage sendet, können Sie eine Push-Benachrichtigung an den Empfänger senden.
In friend_service.dart, ändern Sie die sendFriendRequest Methode:
Dart
Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
  // Existing code to create friend request

  // Send push notification
  final pushQuery = QueryBuilder<ParseInstallation>(ParseInstallation.forQuery())
    ..whereEqualTo('user', toUser);

  await ParsePush().send(
    PushPayload(
      query: pushQuery,
      notification: ParseNotification(
        title: 'New Friend Request',
        alert: '${fromUser.username} sent you a friend request',
      ),
    ),
  );

  return response.success;
}
Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
  // Existing code to create friend request

  // Send push notification
  final pushQuery = QueryBuilder<ParseInstallation>(ParseInstallation.forQuery())
    ..whereEqualTo('user', toUser);

  await ParsePush().send(
    PushPayload(
      query: pushQuery,
      notification: ParseNotification(
        title: 'New Friend Request',
        alert: '${fromUser.username} sent you a friend request',
      ),
    ),
  );

  return response.success;
}
﻿
Hinweis: Stellen Sie sicher, dass Sie die Installation mit dem Benutzer verknüpft haben.
9.7. Installation mit Benutzer verknüpfen
Wenn sich ein Benutzer anmeldet, verknüpfen Sie seine Installation mit seinem Benutzerkonto.
In auth_service.dart, nach erfolgreicher Anmeldung:
Dart
Future<bool> login(String username, String password) async {
  user = ParseUser(username, password, null);

  final response = await user!.login();

  if (response.success) {
    // Associate installation with user
    final installation = await ParseInstallation.currentInstallation();
    installation.set('user', user);
    await installation.save();

    notifyListeners();
    return true;
  } else {
    user = null;
    return false;
  }
}
Future<bool> login(String username, String password) async {
  user = ParseUser(username, password, null);

  final response = await user!.login();

  if (response.success) {
    // Associate installation with user
    final installation = await ParseInstallation.currentInstallation();
    installation.set('user', user);
    await installation.save();

    notifyListeners();
    return true;
  } else {
    user = null;
    return false;
  }
}
﻿
Hinweis: Push-Benachrichtigungen erfordern zusätzliche Einstellungen sowohl auf der Client- als auch auf der Serverseite. Sie müssen verschiedene Szenarien behandeln, wie z.B. Hintergrundbenachrichtigungen und Benutzerberechtigungen, die über den Rahmen dieses Tutorials hinausgehen.
﻿
Fazit
Herzlichen Glückwunsch! Sie haben das Fundament einer Social-Networking-App mit Flutter und Back4App erstellt. Diese App umfasst die Benutzerauthentifizierung, das Profilmanagement und eine Nachrichtenfeed-Funktion. Während die Implementierung vollständiger Freundeverbindungen, Messaging und Benachrichtigungen über den Rahmen dieses Tutorials hinausgeht, haben Sie nun die notwendige Struktur, um Ihre App weiter auszubauen.
Nächste Schritte
Freundeverbindungen: Implementieren Sie Funktionen für Freundschaftsanfragen.
Messaging: Fügen Sie Echtzeit-Chat-Funktionen mit Live Queries hinzu.
Benachrichtigungen: Integrieren Sie Push-Benachrichtigungen für die Benutzerbindung.
UI-Verbesserungen: Verbessern Sie die Benutzeroberfläche und das Benutzererlebnis.
Sicherheit: Stellen Sie die Datensicherheit und den Datenschutz sicher, indem Sie geeignete ACLs in Back4App festlegen.
Zusätzliche Ressourcen
﻿Back4App-Dokumentation﻿
﻿Parse SDK für Flutter-Leitfaden﻿
﻿Offizielle Flutter-Dokumentation﻿
﻿Dokumentation des Provider-Pakets﻿
Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man eine AI-Sprachübersetzer-App mit Flutter und Back4App erstellt
ALS NÄCHSTES
Erstellung einer Blogging-Plattform SPA mit ReactJS und Back4App