Is it possible in a dropdown button the displayed value to not be in the menu?

Question

I tried to do it but I get an error. I was wondering if there is some kind of loophole. Also, is there a way for the menu to open below the displayed value?

Here is the code:

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

class Grile extends StatefulWidget {  

@override
  State<StatefulWidget> createState() {
    return GrileState();
  }
}

class GrileState extends State<Grile> {

  var _bGrile = ['bgrila 1', 'bgrila 2'];
  var _bio = 'bgrila 1';    

  @override
  Widget build(BuildContext context) {

    return Scaffold(

        body: Padding(

            padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
            child: ListView(
                children: <Widget>[
// DropdownButton
                  DropdownButton<String>(

                      items: _bGrile.map((String dropDownStringItem) {
                        return DropdownMenuItem<String>(
                            value: dropDownStringItem,
                            child: Text(dropDownStringItem)
                        );
                      }).toList(),

                      onChanged: (value){
                        Navigator.push(context, MaterialPageRoute(builder: (context) =>
                            GView()));
                      },
                      value: _bio
                  ),
// DropdownButton End
                ]
            )
        )
    );
  } // build
} // GrileState

I am new at programming so excuse anything dumb I wrote in the code.

Answer 1

The DropdownButton class contains a very handy hint property. According to the DropdownButton documentation:

If [value] is null and [hint] is non-null, the [hint] widget is displayed as a placeholder for the dropdown button's value.

What does this mean for you?

All you have to do is add a hint widget to your DropdownButton and then remove the assignment from your dynamic value.

Here's a brief example of a DropdownButton with a hint property:

class DropDownPage extends StatefulWidget {
  @override
  _DropDownPageState createState() => _DropDownPageState();
}

class _DropDownPageState extends State<DropDownPage> {
  int dropdownValue; // Notice how this isn't assigned a value.
  @override
  Widget build(BuildContext context) {
    return Center(
        child: DropdownButton(
      // Here's the hint property. I used a Text widget, 
      // but you can use any widget you like
      hint: Text("Pick a Widget"),
      value: dropdownValue,
      items: [
        DropdownMenuItem(child: Text("FlatButton"), value: 0),
        DropdownMenuItem(child: Text("Container"), value: 1),
        DropdownMenuItem(child: Text("Scaffold"), value: 2),
        DropdownMenuItem(child: Text("GestureDetector"), value: 3),
      ],
      onChanged: (value) {
        setState(() {
          dropdownValue = value;
        });
      },
    ));
  }
}

This is the result:

So in your code, here's what you have to do in your own code.

Edit this: var _bio = 'bgrila 1';

And change it to this: var _bio;

Then add a hint property to your DropdownButton:

       DropdownButton<String>(
                hint: Text("Pick a *****"), // Replace with your hint widget
                items: _bGrile.map((String dropDownStringItem) {
                 return DropdownMenuItem<String>(
                     value: dropDownStringItem,
                   child: Text(dropDownStringItem)
                  );
                }).toList(),

                onChanged: (value){
                 Navigator.push(context, MaterialPageRoute(builder: (context) =>
                        GView()));
               },
               value: _bio
            ),

So that your entire code looks like this:

class Grile extends StatefulWidget {  

@override
  State<StatefulWidget> createState() {
    return GrileState();
  }
}

class GrileState extends State<Grile> {

  var _bGrile = ['bgrila 1', 'bgrila 2'];
  var _bio;    

  @override
  Widget build(BuildContext context) {

    return Scaffold(

        body: Padding(

            padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
            child: ListView(
                children: <Widget>[
// DropdownButton
                  DropdownButton<String>(
                    hint: Text("Pick a *******"),
                      items: _bGrile.map((String dropDownStringItem) {
                        return DropdownMenuItem<String>(
                            value: dropDownStringItem,
                            child: Text(dropDownStringItem)
                        );
                      }).toList(),

                      onChanged: (value){
                        Navigator.push(context, MaterialPageRoute(builder: (context) =>
                            GView()));
                      },
                      value: _bio
                  ),
// DropdownButton End
                ]
            )
        )
    );
  } // build
} // GrileState