Yeni Bir Ekran Aç

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 18 / 33.

Uygulamaların birden fazla ekranı vardır: bir liste, ardından bir öğenin ayrıntıları, sonra da bir ayarlar sayfası. Flutter'da ekran bir widget'tır; genellikle kendi sınıfında bulunan bir Scaffold'dur.

Navigator, ekranlarınızı bir kart destesi gibi yığında tutar. En üstteki, gördüğünüz ekrandır. Navigator.push yeni bir ekranı en üste koyar:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute, yeni ekranı bir telefonun yaptığı gibi kaydırarak getirir. builder, gösterilecek ekranı döndüren bir fonksiyondur.

context, Navigator'a widget ağacında nerede olduğunuzu bildirir. Bu nedenle HomeScreen, kendi sınıfı olarak MaterialApp içinde yer alır: context'i, MaterialApp'in oluşturduğu gezgini bulabilir.

Görev

Kolay

About this app düğmesi henüz hiçbir şey yapmıyor. Navigator.push ile AboutScreen ekranını açmasını sağla.

Kendin dene

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: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}