snackbar

tnrdll

Flutter GetX – Snackbar

GetX ile snackbar kullanımı oldukça kolaydır. Snackbar, uyarı mesajlarını kullanıcılara göstermek için kullanılan bir araçtır. İşlem sonucunu kullanıcıya bildirmek veya hata mesajı göstermek için kullanılabilir.

GetX ile Snackbar kullanmak için, Get.snackbar() metodunu kullanabilirsiniz.

Get.snackbar(
  'Title',
  'This is a snackbar',
  duration: const Duration(seconds: 3),
);

Yukarıdaki kod bloğunda, GetX ile snackbar’ı kullanarak ‘Title’ başlığı ve ‘This is a snackbar’ mesajını ekledik. Ayrıca, snackbar’ın görüntülenme süresini belirlemek için duration parametresini kullandık.

Snackbar’a bir buton eklemek için, action parametresini kullanabilirsiniz.

 Get.snackbar(
    'Title',
    'This is a snackbar',
    duration: const Duration(seconds: 3),
    snackPosition: SnackPosition.BOTTOM,
    backgroundColor: Colors.black,
    colorText: Colors.white,
    margin: const EdgeInsets.only(bottom: 10, left: 5, right: 5),
    mainButton: TextButton(
        onPressed: () {
             // do something
        },
        child: const Text('Button',
               style: TextStyle(color: Colors.white)),
        ),
);

tnrdll

Flutter – Snackbar Action

SnackBar görüntülendiğinde kullanıcıya bir eylem sağlamak isteyebilirsiniz. Örneğin, kullanıcı yanlışlıkla bir mesajı silerse mesajı kurtarmak için (Undo) SnackBar‘da isteğe bağlı bir eylem kullanabilir.

 final snackBar = SnackBar(
   content: const Text('Snackbar Action'),
   action: SnackBarAction(
     label: 'Undo',
     onPressed: () {
       // Some code to undo the change.
     },
   ),
 );

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Title"),
      ),
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.only(top: 100),
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {

                  
                  final snackBar = SnackBar(
                    content: const Text('Snackbar Action'),
                    action: SnackBarAction(
                      label: 'Undo',
                      onPressed: () {
                        // Some code to undo the change.
                      },
                    ),
                  );

                  // Find the ScaffoldMessenger in the widget tree
                  // and use it to show a SnackBar.
                  ScaffoldMessenger.of(context).showSnackBar(snackBar);
                },
                child: const Text("Snack Bar"))
          ],
        ),
      ),
    );
  }
}
tnrdll

Flutter – Snackbar

Flutter’da, projenize Snackbar eklemek için aşağıdaki adımları izlemeniz gerekmektedir:

  • Widget tree’nizde ScaffoldMessenger'ı bulun.
  • ve bir SnackBar göstermek için kullanın.
const snackBar = SnackBar(
  content: Text('Snackbar mesajınız'),
);

ScaffoldMessenger.of(context).showSnackBar(snackBar);
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Title"),
      ),
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.only(top: 100),
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {


                  const snackBar = SnackBar(
                    content: Text('Snackbar mesajınız'),
                  );

                 ScaffoldMessenger.of(context).showSnackBar(snackBar);
                 
                },
                child: const Text("Snack Bar"))
          ],
        ),
      ),
    );
  }
}