Custom dialog box in flutter

How to implement a Custom dialog box in flutter?

its very simple to used custom dialog box in flutter need some alert box and update this code on below mention.Custom dialog box flutter is very rich for customisation facility.

AlertNoResultFoundDialog class

import 'package:flutter/material.dart';
import 'package:vender_app/core/colors.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg_provider/flutter_svg_provider.dart' as fs;
import 'package:vender_app/core/image_constant.dart';

class AlertNoResultFoundDialog extends StatelessWidget {
  const AlertNoResultFoundDialog({
    this.icon,
    this.title,
    this.message,
    this.actions = const [],
    Key? key,
  }) : super(key: key);

  final Widget? icon;
  final String? title;
  final String? message;
  final List<Widget> actions;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
      icon: icon,
      title: title == null
          ? null
          : Text(
              title!,
              textAlign: TextAlign.center,
            ),
      titleTextStyle: TextStyle(
          color: AppColors.reusltNoFoundTitleColor,//as per your color
          fontSize: 20,
          fontWeight: FontWeight.w700),
      content: message == null
          ? null
          : Text(
              message!,
              textAlign: TextAlign.center,
            ),
      contentTextStyle: TextStyle(
          color: AppColors.reusltNoFoundColor,//as per your color
          fontSize: 18,
          fontWeight: FontWeight.w500),
      actionsAlignment: MainAxisAlignment.center,
      actionsOverflowButtonSpacing: 8.0,
      actions: actions,
    );
  }
}

Output

Uses for Custom dialog box

 showDialog(
                  context: context,
                  builder: (ctx) => AlertNoResultFoundDialog(
                    icon: SizedBox(
                      height: 173,
                      width: 210,
                      child: SvgPicture.asset(
                          "assets/images/no_result_found.svg",
                          fit: BoxFit.scaleDown),
                    ),
                    title: 'No Results Found',
                    message:
                        'Try adjusting your search to find what you are looking for.',
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.of(ctx).pop(),
                        child: Padding(
                          padding: const EdgeInsets.only(top: 20.0),
                          child: GestureDetector(
                            onTap: () {},
                            child: Container(
                              height: 60,
                              width: width * 0.6,
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    const Color(0xFF4AB21D),
                                    const Color(0xFF4AB21D),
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: const BorderRadius.all(
                                  Radius.circular(27.5),
                                ),
                              ),
                              child: Center(
                                child: GestureDetector(
                                  onTap: () {
                                   //yur screen
                                  },
                                  child: Text(
                                    'Search Again',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFFFFFFFF), 
                                   
                                  
                                      fontSize: width * 0.05,
                                      fontWeight: FontWeight.w600,
                                      fontFamily: 'ProductSans',
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );

I hope it was a useful article, please share and subscribe to my channel, Thanks for reading and if you have any questions or comments, See you soon. 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *