I want to show popup custome alert box in my flutter app like bootstrap alert box

Question

I'm making flutter app in which i want to show alert box like:

can some one help me to achive it

Answer 1

i have created this type of alert box in my project you can use it:

alertBox.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AlertBox {
  final String title;
  final String content;
  final BuildContext context;

  AlertBox(this.title, this.content, this.context){
    showGeneralDialog(
        context: context,
        barrierDismissible: true,
        barrierLabel: MaterialLocalizations.of(context)
            .modalBarrierDismissLabel,
        transitionDuration: const Duration(milliseconds: 500),
        transitionBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
            ) =>
            SlideTransition(
                position: Tween<Offset>(
                  begin: Offset(0,-1),
                  end: Offset.zero,
                ).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.linear,
                  ),
                ),
              child: child,
            ),
        pageBuilder: (BuildContext buildContext,
            Animation animation,
            Animation secondaryAnimation) {
          return SafeArea(
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.red,
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  color: Colors.red[100],

                ),
                width: MediaQuery.of(context).size.width - 40,
                height: 60,
                padding: EdgeInsets.all(5),
                child: Scaffold(
                  backgroundColor: Colors.transparent,
                  body: Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Expanded(
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Column(
                              children: [
                                Text(title.toString(),style: TextStyle(fontSize: 15,fontWeight: FontWeight.w900,letterSpacing: 1,color: Colors.red),),
                                SizedBox(height: 5,),
                                Text(content.toString(),style: TextStyle(fontSize: 12,color: Colors.red))
                              ],
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                            Navigator.pop(buildContext);
                          },
                          child: Icon(
                                Icons.clear,
                                color: Colors.red,
                            size: 20,
                              ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }

}

call it like:

AlertBox("title","error",context);