Drop Down

rodri_dropdown_overlay.dart

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

class RodriTestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          "Dropdown demo test.",
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      // extendBody: true,
      body: Container(
        child: SingleChildScrollView(
          controller:
              ScrollController(keepScrollOffset: true, initialScrollOffset: 0),

         

          child: Column(
            children: <Widget>[
              Text(
                "Prueba de combobox",
                style: TextStyle(color: Colors.grey, fontSize: 14),
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
              
              SizedBox(
                height: 20,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: Container(
                        child: GestureDetector(
                          child: Center(
                            child: Theme(
                              data: Theme.of(context).copyWith(
                                canvasColor: Colors.orange.withOpacity(0.7),
                              ),
                              child: MyDropdown(),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 80,
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
              Container(
                width: MediaQuery.of(context).size.width * .5,
                height: 80,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyDropdown extends StatefulWidget {
  @override
  _MyDropdownState createState() => _MyDropdownState();
}

class _MyDropdownState extends State<MyDropdown> {
  // agrega el valor actual para actualizar el texto del boton.
  //  int _currValue = 1;
  //List<DropdownMenuItem<String>> _dropDownMenuItems
  List<String> _monthLabels;

  OverlayEntry _overlayList;
  OverlayEntry _overlayBg;

  String _selectedValue;

  @override
  void initState() {
    _monthLabels =
        List.generate(12, (int index) => "Mes ${index + 1}").toList();
    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final String label = _selectedValue ?? "Seleccionar mes";
    return WillPopScope(
      onWillPop: () {
        closeList();
        return Future.value(true);
      },
      child: Container(
        child: MaterialButton(
          child: Text(label),
          onPressed: openList,
        ),
      ),
    );
 
  }

  _createOverlayEntry() {
    RenderBox box = context.findRenderObject();
    var size = box.size;
    var offset = box.localToGlobal(Offset.zero);

    _overlayBg = OverlayEntry(
      builder: (context) {
        return GestureDetector(
          onTap: () => closeList(),
          child: Container(color: Colors.blue.withOpacity(.1)),
        );
      },
    );

    _overlayList = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
          left: offset.dx - 30,
          top: offset.dy + 80,
          width: size.width + 30,
          child: Material(
            color: Colors.transparent,
            elevation: 0,
            child: Container(
              height: 50,
              width: 60,
              decoration: BoxDecoration(
                  color: Colors.yellow.withOpacity(.45),
                  border: Border.all(color: Colors.black),
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.orange.withOpacity(.6),
                      blurRadius: 20,
                      offset: Offset(0, 2),
                      spreadRadius: 2,
                    )
                  ]),
              child: ListView.builder(
                padding: EdgeInsets.symmetric(vertical: 4),
                itemBuilder: (BuildContext context, index) {
                  return buildMonthItem(context, index);
                },
                itemCount: _monthLabels.length,
              ),
            ),
          ),
        );
      },
    );
  }

  void openList() {
    if (_overlayList == null) {
      _createOverlayEntry();
    }
    Overlay.of(context).insertAll(
      [_overlayBg, _overlayList],
    );
  }

  void closeList() {
    _overlayList?.remove();
    _overlayBg?.remove();
  }

  buildMonthItem(BuildContext context, int index) {
    final String label = _monthLabels[index];
    return ListTile(
      onTap: () {
        _selectedValue = label;
        closeList();
        setState(() {});
      },
      dense: true,
      title: Text(
        label,
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }
}