Menu
CoddyTech

Strzałka wstecz

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 19 z 33.

Ekran, który umieszczasz na stosie, musi mieć sposób na powrót. AppBar zapewnia go bezpłatnie: gdy pod nim na stosie znajduje się ekran, pasek aplikacji wyświetla strzałkę wstecz na początku.

Scaffold(
  appBar: AppBar(title: const Text('Details')),
  body: ...,
)

Dotknięcie strzałki zdejmuje ze stosu ekran znajdujący się na wierzchu, a ekran pod nim znów się wyświetla w niezmienionej postaci. Gest cofania dostępny w telefonie oraz przycisk cofania w Androidzie działają tak samo.

Pierwszy ekran aplikacji nie ma pod sobą żadnego ekranu, więc jego pasek aplikacji nie wyświetla strzałki.

challenge icon

Wyzwanie

Łatwy

Otwórz szczegóły na telefonie: nie ma możliwości powrotu. Dodaj do DetailScreen pasek AppBar zatytułowany Details, aby pojawiła się strzałka powrotu.

Spróbuj swoich sił

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Open details'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text('Here are the details'),
      ),
    );
  }
}
quiz iconSprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Listy i ekrany

Poćwicz samodzielnie: Kompilator Flutter online