Flutter AlertDialog Tutorial e Exemplos
Neste tutorial, analisaremos as opções para criar um diálogo de alerta em flutter. Isto envolve criá-los com ou sem pacotes de terceiros.
O que é um dialoG de alerta?
Um diálogo de alerta informa o usuário sobre situações que requerem reconhecimento.
O que é Flutter?
Flutter é o aplicativo móvel SDK do Google para criação de interfaces nativas de alta qualidade em iOS e Android em tempo recorde.
Flutter funciona com código existente, é usado por desenvolvedores e organizações ao redor do mundo, e é gratuito e de código aberto.
Exemplo 1: Exemplo Flutter Simple AlertDialog
Vejamos um exemplo simples de alertadiálogo de flutter com título e descrições. Neste exemplo, primeiramente, apresentamos um botão plano que, quando o usuário pressiona ou clica, abrimos um diálogo de alerta. Neste exemplo, não utilizamos nenhuma biblioteca de terceiros.
Aqui está o aplicativo em modo paisagem:
Tutorial em vídeo (ProgrammingWizards TV Channel)
Bem, temos um tutorial em vídeo como alternativa a isto. Se você preferir tutoriais como este, então seria bom que você assine nosso canal no YouTube. Basicamente, temos uma TV para programação onde fazemos tutoriais diários especialmente andróides.
Aqui estão os arquivos que exploramos:
- pubspec.yaml
- lib/main.dart
Etapa 1: Dependências
A Flutter suporta o uso de pacotes compartilhados contribuídos por outros desenvolvedores para os ecossistemas Flutter e Dart. Isto permite construir rapidamente seu aplicativo sem ter que desenvolver tudo do zero.
Estaremos adicionando pacotes sob este arquivo.
- Abra o arquivo
pubspec.yamllocalizado dentro de sua pasta de aplicativos e adicione dependências sob dependências. - Se for um terceiro, então você terá que instalá-lo.
A partir do terminal: Execute o `pubspec.yaml'.
OU
Do Android Studio/IntelliJ: Clique em 'Packages Get' na fita de ação na parte superior do pubspec.yaml
Do Código VS: Clique em 'Obter pacotes' localizado no lado direito da fita de ação na parte superior do pubspec.yaml
A "floricultura" é sempre nossa dependência da sdk, pois a utilizamos para desenvolver nossos ios e aplicações andróides.
name: mr_alert_dialog
description: A new Flutter project.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
Como você pode ver, usamos os pacotes padrão e nenhuma biblioteca de terceiros.
Passo 2: Escrever código
O "principal.dart" é onde escrevemos nosso código de flutter em linguagem de programação dart. Em Dart é muito comum escrever várias classes em um único arquivo. Portanto, este simples arquivo terá três classes.
**1. Como empacotar em Flutter/Dart***.
Mas primeiro precisamos importar alguns pacotes e o fazemos utilizando a palavra-chave "importar" em dardos.
import 'package:flutter/material.dart';
Aqui estão as embalagens que estamos importando:
- material.dart : nos dará widgets de design de material e tema.
**2. Como fazer as aulas em Flutter/Dart***.
Em Dart como na maioria das linguagens de programação estilo C, você cria uma classe utilizando a palavra-chave classe. As classes são mecanismos de encapsulamento em linguagens de Programação Orientada a Objetos.
Neste caso, nós criamos três classes:
class MyApp extends StatelessWidget {..}
class Home extends StatefulWidget {..}
Nossa primeira classe é derivada do StatelessWidget e a implementação do método build(). Esse método irá construir um widget MaterialApp com título, casa e conjunto de temas e devolvê-lo como um widget.
A segunda classe derivará do StatefulWidget e substituirá o método 'createState()createState().
Aqui está o código fonte completo:
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter AlertDialog',
home: Scaffold(
appBar: AppBar(
title: Text("AlertDialog Example"),
),
body: Home(),
),
theme: new ThemeData(primaryColor: Colors.orange),
);
}
}
class Home extends StatelessWidget {
/**
Comstruct our widget and return it.
*/
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type AlertDialog
return AlertDialog(
title: new Text("AlertDialog Class"),
content: new Text("Creates an alert dialog.Typically used in conjunction with showDialog."+
"The contentPadding must not be null. The titlePadding defaults to null, which implies a default."),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
child: Text('Show AlertDialog'),
),
);
}
}
void main() {
runApp(new MyApp());
}
//end
Aplicações de Flutter Running Flutter
Basta certificar-se de que seu dispositivo ou emulador está funcionando e clicar no botão 'run' em android studio, ele irá automaticamente escolher o dispositivo e instalar o aplicativo.
Aletrnative, você pode usar o terminal ou o prompt de comando. Navegue/Cd para a página raiz do projeto e digite isto:
flutter.bat build apk
Isto construirá o APK que você poderá então arrastar e instalar em seu dispositivo. O processo de construção em minha máquina leva cerca de três minutos, o que não é ruim.
Exemplo 2: Diálogo de Confirmação de Flutter
import 'package:flutter/material.dart';
void main(){ runApp(new MaterialApp(
home: new MyApp(),
));
}
enum MyDialogueAction{
yes,
no,
maybe
}
class MyApp extends StatefulWidget {
MyAppState createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
String _text = '';
void _onChange(String value) {
setState((){
_text = value;
});
}
void _dialogueResult(MyDialogueAction value){
print('you selected $value');
Navigator.pop(context);
}
void _showAlert(String value){
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text('Alert!'),
content: new Text(value,
style: new TextStyle(fontSize: 30.0),),
actions: <Widget>[
new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.yes);}, child: new Text('yes')),
new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.no);}, child: new Text('no')),
],
)
);
}
Widget build (BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text('Alert Demo'),
),body: new Container(
child: new Column(
children: <Widget>[
new TextField(onChanged: (String value){ _onChange(value);},),
new RaisedButton(
onPressed: (){_showAlert(_text);},
child: new Text('Press me'),
)
],
),
),
);
}
}
Exemplo 3: Animado, Exemplo de Diálogo Giffy
Se você quiser ter mais alguns com seus diálogos de alerta, então você precisa usar pacotes de terceiros como este.
Giffy Dialog é um belo e personalizado diálogo de alerta para flutter altamente inspirado no FancyAlertDialog-Android.
O código fonte é 100% Dart, e tudo reside na pasta /lib.
Através desta solução você pode carregar os cabeçalhos de diálogo de imagens gif localmente ou remotamente da rede.
Aqui está uma demonstração deste diálogo em uso:
Passo 1: Instalá-lo
Em seu pubspec.yaml adicione este pacote como uma dependência:
dependencies:
giffy_dialog: 1.8.0
"pub flutter get" para ir buscá-lo.
Passo 2: Preparar imagens
Adicione algumas imagens na pasta de ativos ou prepare urls de imagens.
Passo 3: Escrever código
Comece importando o giffy_dialog:
import 'package:giffy_dialog/giffy_dialog.dart';
Veja como você cria um diálogo com uma imagem de cabeçalho carregada da rede:
onPressed: () {
showDialog(
context: context,builder: (_) => NetworkGiffyDialog(
imageUrl:"https://raw.githubusercontent.com/Shashank02051997/
FancyGifDialog-Android/master/GIF's/gif14.gif",
title: Text('Granny Eating Chocolate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w600)),
description:Text('This is a granny eating chocolate dialog box.
This library helps you easily create fancy giffy dialog',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.BOTTOM_TOP,
onOkButtonPressed: () {},
) );
}
E aqui está como você cria um diálogo com a imagem de cabeçalho carregada a partir da pasta de ativos:
onPressed: () {
showDialog(
context: context,builder: (_) => AssetGiffyDialog(
imagePath: 'assets/men_wearing_jacket.gif',
title: Text('Men Wearing Jackets',
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text('This is a men wearing jackets dialog box.
This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
entryAnimation: EntryAnimation.RIGHT_LEFT,
onOkButtonPressed: () {},
) );
}
Exemplo completo
Comece instalando a biblioteca, como já foi discutido acima.
Em seguida, substitua seu main.dart pelo seguinte código:
**main.dart***
import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
void main() => runApp(new MyApp());
const List<Key> keys = [
Key("Network"),
Key("NetworkDialog"),
Key("Flare"),
Key("FlareDialog"),
Key("Asset"),
Key("AssetDialog")
];
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Giffy Dialog Demo',
theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Giffy Dialog Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
color: Colors.teal,
child: Text(
"Network Giffy",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
"https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif",
fit: BoxFit.cover,
),
entryAnimation: EntryAnimation.TOP_LEFT,
title: Text(
'Granny Eating Chocolate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'This is a granny eating chocolate dialog box. This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
),
onOkButtonPressed: () {},
));
}),
RaisedButton(
key: keys[2],
color: Colors.teal,
child: Text(
'Flare Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
'Space Reloading',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.DEFAULT,
description: Text(
'This is a space reloading dialog box. This library helps you easily create fancy flare dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
));
}),
RaisedButton(
key: keys[4],
color: Colors.teal,
child: Text(
'Asset Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset(
'assets/men_wearing_jacket.gif',
fit: BoxFit.cover,
),
title: Text(
'Men Wearing Jackets',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.BOTTOM_RIGHT,
description: Text(
'This is a men wearing jackets dialog box. This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
));
}),
],
),
),
);
}
}
Referência
Aqui estão os links de referência:
| --- |
|---|