Como criar um alerta pop-up em Flutter
Olá desenvolvedores, hoje implementei as janelas pop-up no flutter mostrado que ele precisa de todos os aplicativos no último e mais de um pop-up em um aplicativo normal, então criei um tópico muito importante no desenvolvimento de aplicativos flutter, no dia a dia usamos a personalização o alerta de diálogo pop-up é exibido na tela de uma maneira muito fácil para o desenvolvedor de flutter e com um belo layout pop-up da tela.
Como criar um alerta pop-up rapidamente.
Este tópico abrange
- O que é a caixa de diálogo de alerta no Flutter?
- Como crio uma caixa de diálogo de alerta no flutter?
- Como o diálogo de alerta retorna o valor em flutter?
- Como chamar um widget para inserir o alerta de diálogo no flutter?
- Como você usa o showDialog no flutter?
- Qual é a diferença entre um alerta e uma caixa de diálogo de alerta?
- Qual é a diferença entre show e showDialog?
- Caixa de diálogo pop-up de vibração superior, caixa de diálogo de alerta, caixa de diálogo personalizada?
- Como implementar uma caixa de diálogo personalizada no flutter?
Caixa de diálogo gerar código
Widget dialogBox() {
return Container(
width: 250,
height: 400,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: ColorConstant.gray50,
borderRadius: BorderRadius.circular(
getHorizontalSize(
5.00,
),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: getPadding(
left: 18,
top: 24,
right: 18,
),
child: CommonImageView(
imagePath: ImageConstant.imgPaymentSuccess,
height: getSize(
175.00,
),
width: getSize(
175.00,
),
),
),
Padding(
padding: getPadding(
left: 18,
top: 14,
right: 18,
),
child: Text(
"Payment Successfull",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: TextStyle(
color: ColorConstant.indigo800,
fontSize: getFontSize(
18,
),
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
),
),
),
Container(
width: getHorizontalSize(
152.00,
),
margin: getMargin(
left: 18,
top: 3,
right: 18,
),
child: Text(
"We have received the payment of Rs. 2,300. ",
maxLines: null,
textAlign: TextAlign.center,
style: TextStyle(
color: ColorConstant.gray700,
fontSize: getFontSize(
14,
),
fontFamily: 'Poppins',
fontWeight: FontWeight.w400,
height: 1.43,
),
),
),
Padding(
padding: getPadding(
left: 10,
top: 39,
right: 5,
),
child: Text(
"Download payment slip.",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: TextStyle(
color: ColorConstant.gray700,
fontSize: getFontSize(
13,
),
fontFamily: 'Poppins',
fontWeight: FontWeight.w400,
height: 1.00,
),
),
),
const SizedBox(
height: 14,
),
ElevatedButton.icon(
icon: CommonImageView(
svgPath: ImageConstant.imgDownlode,
color: Colors.black,
),
onPressed: () {},
label: Padding(
padding: getMargin(
left: 18,
top: 10,
right: 18,
bottom: 5,
),
child: const Text(
"Download",
style: TextStyle(
fontSize: 16,
color: Colors.black,
),
),
),
style: ElevatedButton.styleFrom(
primary: AppColors.downlodeBtnColor,
fixedSize: const Size(208, 43),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(1.0),
),
),
),
],
),
),
),
],
),
),
);
}
Acesso ao widget de diálogo em uma função
Widget buildSuccessDialog(BuildContext context) {
return AlertDialog(
backgroundColor: ColorConstant.gray50,
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
dialogBox(),
],
),
actions: const <Widget>[],
);
}Acesso final à classe de compilação no widget personalizado
import 'package:flutter/material.dart';
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),
),
body: const Center(
FloatingActionButton(
heroTag: 'Dialog Click',
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) => buildSuccessDialog(context),
);
}
),
),
);
}
}Saída final
Conclusão:
Neste artigo, discutimos a parte mais benéfica das imagens de texto pop-up de alerta de diálogo personalizado e implementação de rótulo e contêiner separado com um ícone de anúncio de botão, para facilitar nossa vida de desenvolvimento Nas partes futuras, compartilharei alguns códigos importantes de pop-up de alerta de diálogo para tornar sua jornada de desenvolvimento do Flutter um pouco mais rápida e muitas dicas relacionadas ao Flutter e ao Dart para obter mais ajuda, consulte outros artigos
Espero que tenha sido um artigo útil, por favor, compartilhe e se inscreva no meu canal, você gostou mais. Obrigado por ler e se você tiver alguma dúvida ou comentário, até breve.
