Snackbar යනු ඔබේ යෙදුමේ ඉවත දැමිය හැකි උත්පතන පණිවිඩයක් සංදර්ශන කිරීමට flutter මඟින් සපයන ලද විජට් එකකි. අපගේ යෙදුම්වල යම් යම් ක්‍රියා සිදු වන්නේ නම් පරිශීලකයන් පෙන්වීමට එය භාවිතා වේ. උදාහරණයක් ලෙස, කිසියම් හේතුවක් නිසා පරිශීලක පිවිසුම් ක්‍රියාවලිය අසාර්ථක වුවහොත්, නැවත උත්සාහ කරන ලෙස පරිශීලකයාට දැනුම් දීමට අපට ස්නැක්බාර් එකක් භාවිතා කළ හැක. එය තිරය මත දිස්වන අතර, සිදු වූ ක්‍රියාව අහෝසි කිරීම වැනි මෙහෙයුම් ද සිදු කළ හැකිය. Snackbar තොරතුරු සහිත පණිවිඩය ඉතා කෙටි කාලයක් සඳහා ප්‍රදර්ශනය කරන අතර කාලය සම්පූර්ණ වූ විට එය තනිවම අතුරුදහන් වේ. ස්නැක් බාර් එකක් සඳහා නිර්දේශිත තිර කාලය තත්පර 5-10 කි. එය ෆ්ලටර් පුස්තකාලවල ද්‍රව්‍ය පැකේජයේ සපයා ඇත. ස්නැක් බාර් එකක් භාවිතා කිරීමට ඔබ "පැකේජය:flutter/material.dart" ආයාත කිරීමට අවශ්‍ය වේ.
Constructors:
SnackBar({Key key,
@required Widget content,
Color backgroundColor,
double elevation,
EdgeInsetsGeometry margin,
EdgeInsetsGeometry padding,
double width,
ShapeBorder shape,
SnackBarBehavior behavior,
SnackBarAction action,
Duration duration: _snackBarDisplayDuration,
Animation animation,
VoidCallback onVisible})
Properties:
-
action: Action to perform based on snackbar.
-
animation: Entry and the exit animation of snackbar.
-
backgroundcolor: Snackbar background color
-
behavior: Behavior and location of snackbar.
-
content: Content of snackbar.
-
duration: The amount of time snackbar should be displayed.
-
elevation: Elevates the snackbar by increasing shadow.
-
margin: Space around snackbar.
-
onVisible: Called the first time that the snackbar is visible within a scaffold.
-
padding: space around content inside snackbar.
-
shape: Shape of snackbar.
-
width: Width of snackbar.
Steps to Create a Snackbar
1. Create a Scaffold Widget: A Snackbar is displayed inside a scaffold widget that is used to create the entire visible screen of your mobile application. It provides the appbar, title, and other properties of the body that all together makes up the widget tree.
Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
),
);
2. Create a Snackbar class: Create a stateless widget class that will represent your snackbar and the actions it is performing. Inside this class create a button it may be elevated, raised or flat, and assign a look to it, For Example: color, text, onhover effect etc. Create a final property and return Snackbar to it, that will hold all the actions that are going to be performed when the button is clicked.
class snackBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
onPressed: () {
const snackdemo = SnackBar(
content: Text('Hii this is GFG\'s SnackBar'),
backgroundColor: Colors.green,
elevation: 10,
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(5),
);
ScaffoldMessenger.of(context).showSnackBar(snackdemo);
// 'showSnackBar' is deprecated and shouldn't be used.
//Use ScaffoldMessenger.showSnackBar.
// Scaffold.of(context).showSnackBar(snackdemo);
},
child: const Text('Click Here'),
),
);
}
}
3. Display the Snackbar: Use the Scaffold Messenger class to display the information contained by your snackbar. It uses a context provided by the BuilContext argument. Here, snackdemo is the final property that holds the snackbar.
4. Call your Class: Finally, Inside the body of the scaffold call the stateless class you created for your snackbar.
Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
),
body: snackBarDemo(),
);
}
}
Full Code
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
static const header = 'Apps Lanka Dev';
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: header,
home: MyHomePage(title: header),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
),
body: const snackBarDemo(),
);
}
}
// ignore: camel_case_types
class snackBarDemo extends StatelessWidget {
const snackBarDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
onPressed: () {
const snackdemo = SnackBar(
content: Text('Hii this is GFG\'s SnackBar'),
backgroundColor: Colors.green,
elevation: 10,
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(5),
);
ScaffoldMessenger.of(context).showSnackBar(snackdemo);
// 'showSnackBar' is deprecated and shouldn't be used.
//Use ScaffoldMessenger.showSnackBar.
// Scaffold.of(context).showSnackBar(snackdemo);
},
child: const Text('Click Here'),
),
}
}
We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk
0 Comments