Caixa de diálogo personalizada usando Flutter
Tempo de leitura: 2 minutes
Neste tutorial, vou mostrar a maneira mais simples de construir um diálogo de alerta personalizado usando flutter, como este
Código fonte:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // Este widget é a raiz do seu aplicativo. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Página inicial de demonstração do Flutter'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { Future<void> _showdialog() async { return showDialog<void>( context: context, barrierDismissible: false, builder: (BuildContext context) { return Dialog( backgroundColor: Colors.white, child: Container( height: 350.0, child: Column( children: [ Image.network( "https://static.vecteezy.com/system/resources/thumbnails/000/203/020/original/T_17-01.jpg"), Text( "Descubra o espaço", style: TextStyle( color: Colors.black87, fontSize: 28.0, ), ), Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: Center( child: Text( "Esta é uma caixa de diálogo simples e personalizada que você pode adicionar ao seu projeto", textAlign: TextAlign.center, ), ), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Container( alignment: Alignment.centerRight, child: MaterialButton( color: Colors.blue, onPressed: () => Navigator.of(context).pop(), child: Text( "Close", style: TextStyle( color: Colors.white, ), ), ), ), ) ], ), )); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Diálogo Personalizado"), ), body: Center( child: FlatButton( onPressed: () { _showdialog(); }, color: Colors.blue, child: Text( "Open Dialog", style: TextStyle( color: Colors.white, ), ), ), ), ); } }