Question 79410 in Flutter Question posted in
The official Flutter documentation can be found here.

how do i remove the box in dialog – Flutter

i have a popup dialog but but i cant remove the background dialog box. i have tried to set it to transparent but still there is a shade of black. Is there other way i can use other then dialog box.

below is the link of the image

https://imgur.com/LlY9LvT

 void showPopUpButton(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => Dialog(
        backgroundColor: Colors.transparent,
        child: IconButton(
          icon: Image.asset('lib/images/last.png'),
          iconSize: 260,
Tags:

3

Answers


  1. 0

    I think it’s about elevation? Try setting it to 0

    Login or Signup to reply.
  2. 0

    Use the combination of transparent background color and elevation value 0.

    showDialog(
                  context: context,
                  builder: (_) => Dialog(
                        backgroundColor: Colors.transparent,
                        elevation: 0.0,
                        child: IconButton(
                            icon: Image.asset('lib/images/last.png'),
                            iconSize: 260,
                        ),
                      ));
    Login or Signup to reply.
  3. 0

    The reason for your dialog having the shade of black may be due to the elevation of the widget or the barrier color of the dialog.

    Full Code

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Dialog Sample')),
        body: const Center(
          child: DialogExample(),
        ),
      ),
    );
  }
}

class DialogExample extends StatelessWidget {
  const DialogExample({super.key});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => showDialog<String>(
        barrierColor:Colors.transparent, #Color of the space around the dialog
        context: context,
        builder: (BuildContext context) => Dialog(
          backgroundColor :Colors.transparent, #Color of the dialog
          elevation:0, #elevation of the dialog
          child:Container(height:200,width:200,color:Colors.grey)
        ),
      ),
      child: const Text('Show Dialog'),
    );
  }
}

    Output

    Output

    Hope this helps.Happy Coding 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search