Popup Dialog

Okno dialogowe to rodzaj widżetu, który pojawia się w oknie lub na ekranie, zawiera wszelkie informacje lub może poprosić o podjęcie dowolnej decyzji. Gdy pojawi się okno dialogowe, wszystkie inne funkcje zostaną wyłączone, dopóki nie zamkniesz okna dialogowego lub nie udzielisz odpowiedzi. Używamy okna dialogowego do warunku, takiego jak powiadomienie o alarmie lub proste powiadomienie, w którym wyświetlane są różne opcje.

---

Na początek musimy Scaffold wyekstrahować do oddzielnej klasy. Klikamy na Scaffold, żółtą lampeczkę, wybieramy Extract Widget i nadajemy tytuł. Ja nazwałam tę klasę HomePage.

Następnie musimy wstawić przycisk np. za pomocą 'ElevatedButton':

ElevatedButton(
            onPressed: () {},
            child: const Text('Przypomnienie'),
          ),

Jeśli naciśniemy ten przycisk wywołamy metodę 'showDialog' a wewnątrz tej metody tworzymy okno alertu 'AlertDialog()' z tytułem 'title', treścią do wyświetlenia 'content' oraz przyciskiem do zamknięcia okna 'actions':

ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: const Text('PRZESTAW ZEGAREK!'),
                content: const Text(
                    "Zmiana czasu z letniego na zimowy nastąpi 30 października. Nasze zegarki musimy przestawić z godziny 3:00 na godzinę 2:00."),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('OK'),
                  ),
                ],
              ),
            );
          },
          child: const Text('Przypomnienie'),
        ),

---

Cały kod wygląda następująco:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const HomePage(),
    );
  }
}



class HomePage extends StatelessWidget {
  const HomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                backgroundColor: Colors.greenAccent,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                titleTextStyle: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                    fontSize: 20),
                title: const Text('PRZESTAW ZEGAREK!'),
                content: const Text(
                    "Zmiana czasu z letniego na zimowy nastąpi 30 października. Nasze zegarki musimy przestawić z godziny 3:00 na godzinę 2:00."),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text(
                      'OK',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.red,
                        fontSize: 15,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
          style: TextButton.styleFrom(
            backgroundColor: Colors.greenAccent,
          ),
          child: const Text(
            'Przypomnienie',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.red,
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}

---

PODSUMOWANIE:

Okno dialogowe alertu zawiera opcjonalny tytuł i opcjonalną listę działań. Są odpowiednie do szybkich i prostych alertów dla użytkowników, takich jak komunikaty o sukcesie lub alerty informacyjne. Możesz im nadać swój osobisty charakter, aby wyglądało ładnie, zachowując jednocześnie motyw aplikacji.