How to change dialog's elevation?

[jimmyhappy19920308]

@SchabanBo Hi~

Can change dialog's elevation?

[SchabanBo]

Hi @yingming25, You can provide Box Decoration with some shadows to OverDialog.decoration. This will add some elevation effect.

[jimmyhappy19920308]

@SchabanBo Thanks!

[jimmyhappy19920308]

@SchabanBo Sorry, I discribe not exactly. I want change dialog's Z axis like Material widget. Because i put dropdownButton inside OverDialog then i select item, but items menu be cover behind overDialog.

[jimmyhappy19920308]

@SchabanBo I tried your suggestion above, but not resolve dropdownButton's items menu be cover behind overDialog.

[jimmyhappy19920308]

example:

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

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Overlayment.show(
                  context: context,
                  OverDialog(
                    width: 500,
                    height: 400,
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(blurRadius: 8.0),
                      ],
                    ),
                    child: Column(
                      children: [
                        Container(
                          child: DropdownButtonExample(),
                        )
                      ],
                    ),
                  ),
                );
              },
              child: Text("show dialog"),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  static List<String> list = <String>['One', 'Two', 'Three', 'Four'];
  String dropdownValue = list.first;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? value) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValue = value!;
        });
      },
      items: list.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

vedio:

https://user-images.githubusercontent.com/26245479/211129747-2e0e76e0-93c3-4f62-9f4c-4483fc7c8782.mp4

[SchabanBo]

Hi @yingming25,

I see your problem, but unfortunately, I don't have enough information or time to look into it. I will suggest this workaround for now and leave the issue open,

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

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Overlayment.show(
                  context: context,
                  OverDialog(
                    width: 500,
                    height: 400,
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(blurRadius: 8.0),
                      ],
                    ),
                    child: Column(
                      children: [
                        Container(
                          child: const DropdownButtonExample(),
                        )
                      ],
                    ),
                  ),
                );
              },
              child: const Text("show dialog"),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  static List<String> list = <String>['One', 'Two', 'Three', 'Four'];
  String dropdownValue = list.first;

  @override
  Widget build(BuildContext context) {
    return OverExpander<String>(
      expandChild: Column(
        mainAxisSize: MainAxisSize.min,
        children: list.map((String value) {
          return ListTile(
            title: Text(value),
            onTap: () {
              Overlayment.dismissLast(result: value);
              setState(() {
                dropdownValue = value;
              });
            },
          );
        }).toList(),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Text(dropdownValue), const Icon(Icons.arrow_drop_down)],
      ),
    );
  }
}

[jimmyhappy19920308]

@SchabanBo Thank you!

[AstrisDev]

Same problem. But I have troubles with DateTimePicker called from OverDialog.