Fluttertoast se usa para crear un mensaje de brindis escribiendo solo una línea de código. A continuación se muestran algunos pasos para crear un Fluttertoast en Flutter. Básicamente aquí, estamos creando una nueva aplicación Flutter usando un símbolo del sistema.
- Elimine el código predeterminado del archivo main.dart y escriba su propio código.
- Ahora, agrega fluttertoast en las dependencias del archivo pubspec.yaml :
Algunas propiedades de showToast :
- msg : mensaje de brindis.
- toastLength : Duración del brindis
- backgroundColor : color de fondo que se mostrará.
- textColor : Color del texto que se mostrará.
- fontSize : tamaño de fuente del mensaje de brindis .
Ejemplo: main.dart
Dart
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the
// root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Demo",
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GeeksforGeeks"),
backgroundColor: Colors.green,
),
body: Center(
child: TextButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'GeeksforGeeks',
backgroundColor: Colors.grey,
);
},
child: Container(
padding: const EdgeInsets.all(14),
color: Colors.green,
child: const Text(
'Show Toast',
style: TextStyle(color: Colors.white),
),
),
),
// FlatButton is deprecated. Use TextButton instead.
// child: FlatButton(
// color: Colors.blue,
// onPressed: () {
// Fluttertoast.showToast(
// msg: "GeeksforGeeks",
// backgroundColor: Colors.grey,
// // fontSize: 25
// // gravity: ToastGravity.TOP,
// // textColor: Colors.pink
// );
// },
// child:
// const Text("Show toast", style: TextStyle(color: Colors.white)),
// ),
),
);
}
}
Producción:
Si el tamaño de fuente se establece en 25, el diseño cambia de la siguiente manera:
Si el tamaño de fuente se establece en 25 y la gravedad se establece en ToastGravity.TOP , el diseño cambia de la siguiente manera:
Si el tamaño de fuente se establece en 25 y la gravedad se establece en ToastGravity.TOP y el color del texto se establece en rosa, el diseño cambia de la siguiente manera:
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA