SnackBar Gösterme

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 10 / 34.

SnackBar, ekranın altından yukarı doğru kayan ve yaklaşık dört saniye sonra kendi kendine kaybolan kısa bir mesajdır. Uygulamalar bunu bir işlemin başarılı olduğunu bildirmek için kullanır: Kaydedildi, Gönderildi, Silindi.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Sent')),
);

İçten dışa doğru okuyun: SnackBar(...) mesajdır, showSnackBar mesajı ekrana getirir ve ScaffoldMessenger.of(context) uygulamanın mesajları gösteren bölümünü bulur.

context, ağacın içinde widget'ın bulunduğu yerdir; build bu değeri alır. .of(context), bulunduğu yerden başlayarak ağaçta yukarı doğru arama yapar. Messenger, MaterialApp tarafından sağlandığı için sizden daha yukarıda olmalıdır. HomePage, MaterialApp'in altında olduğundan onun context'i messenger'ı bulur. MyApp'in context'i ise messenger'ın üstündedir; oradan gösterilen bir SnackBar başarısız olur ve "ScaffoldMessenger bileşeni bulunamadı" hatası verir. Ekranın kendi sınıfına sahip olmasının bir başka nedeni de budur.

Görev

Kolay

Save düğmesine basıldığında, Note saved yazan bir SnackBar gösterin.

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}