startup_names_provider_starting_point.dart

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';


// 1) neuen ChangeNotifier mit dem Namen StartupNameProvider anlegen
// Hier ist ein Beispiel das die Counter App auf Provider & ChangeNotifier umstellt
// https://gist.github.com/dkbast/2a8dcece1146bb0f85d814087f08dec2
// der StartupNameProvider sollte die _suggestions und _saved aus dem _RandomWordsState ersetzen
// am leichtesten findest du die Stellen an denen beide im Einsatz sind in dem du sie unten auskommentierst


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 2) Da wir den StartupNameProvider in der ganzen App brauchen müssen wir ihn über der MaterialApp einhängen
    // dafür müssen wir provider als Abhängigkeit in der pubspec.yaml hinzufügen so wie wir das schon mit 
    // english_words gemacht haben - im Zweifel nochmal in die Lektion schauen
    return MaterialApp(
      title: 'Startup Name Generator',
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
        ),
      ),
      home: const RandomWords(),
    );
  }
}

// 4) RandomWords könnte auch ein einfaches StatelessWidget sein, den State halten wir ja jetzt im Provider
class RandomWords extends StatefulWidget {
  const RandomWords({super.key});

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  // diese Zeile am besten auskommentieren und schauen wo drauf zugegriffen wird
  final _suggestions = <WordPair>[];
  // diese Zeile am besten auskommentieren und schauen wo drauf zugegriffen wird
  final _saved = <WordPair>{};
  final _biggerFont = const TextStyle(fontSize: 18);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Startup Name Generator'),
        actions: [
          IconButton(
            icon: const Icon(Icons.list),
            onPressed: _pushSaved,
            tooltip: 'Saved Suggestions',
          ),
        ],
      ),
      body: ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) return const Divider();
          // hier könnte es Sinn ergeben den Provider in einer Variablen zwischen zu speichern
          // mit Provider.of<NameDesProviders>(context) oder mit context.read oder context.watch
          // am besten einfach einen kurzen Blick in die Dokumentation werfen
          // https://pub.dev/documentation/provider/latest/provider/provider-library.html#extensions
          // https://pub.dev/documentation/provider/latest/provider/Provider/of.html
          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }

          // das kann hier berechnet werden, oder auch im StartupNameProvider
          final alreadySaved = _saved.contains(_suggestions[index]);

          return ListTile(
            title: Text(
              _suggestions[index].asPascalCase,
              style: _biggerFont,
            ),
            trailing: Icon(
              alreadySaved ? Icons.favorite : Icons.favorite_border,
              color: alreadySaved ? Colors.red : null,
              semanticLabel: alreadySaved ? 'Remove from saved' : 'Save',
            ),
            onTap: () {
              // setState ist wie notifyListeners nur für das StatefulWidget
              // ansich brauchen wir das hier nichtmehr
              setState(() {
                if (alreadySaved) {
                  _saved.remove(_suggestions[index]);
                } else {
                  _saved.add(_suggestions[index]);
                }
              });
            },
          );
        },
      ),
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (context) {
          // siehe weiter unten zu 3) alles in diesem Builder kann einfach in die 
          // build Methode eines neuen Widgets geschoben werden
          final tiles = _saved.map(
            (pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = tiles.isNotEmpty
              ? ListTile.divideTiles(
                  context: context,
                  tiles: tiles,
                ).toList()
              : <Widget>[];

          return Scaffold(
            appBar: AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }
}

// 3) hier wollen wir jetzt ein neues Widget für die zweite Seite anlegen, 
// das ist ja der Grund warum wir den Umbau machen
// Schaut am besten mal kurz hier in die Doku wie so ein Widget aussehen kann:
// https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html

// 5) Bonus: fügt die Möglichkeit Favoriten zu löschen auf der Unterseite aus 3) ein