Reputation: 23676

DropDownButton: Adjust height of items

I have DropDownButton:

DropdownButtonHideUnderline(
    child: DropdownButton(
      isExpanded: true,
      value: value,
      items: widget.items.map((item) {
        return DropdownMenuItem(
          value: item, 
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, 
              children: [
                Text(
                  item.toString(),
                ),
                Container(
                  child: Text(
                    item.subtitle.toString(),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  padding: EdgeInsets.only(left: 10.0)
                ),
              ]),
              padding: EdgeInsets.only(bottom: 10),
            )
      }).toList(),
      onChanged: widget.onChanged,
      selectedItemBuilder: (context) {
        return widget.items.map((item) {
          return Align(
            child: Text(
              item.toString(),
            ),
            alignment: Alignment.centerLeft,
          );
        }).toList();
      }
    )
  )

I am trying to implement a title and a subtitle (a bit smaller description). The title is generating a "Buttom Overflow" and the subtitle overflows to next item.

Is there a chance to adjust the height according to the required space of its content?

Edit:

Example: DartPad

Edit:

To make it clearer: My goal is to allow:

At least one line title, may allow two lines title
Optionally up to two lines subtitle

Makes 1-4 lines per item. Height of the item in the list should be adjusted depending on its content.

Upvotes: 2

Answers (3)

Ahmed Elsayed

Reputation: 740

You can change dropdown item height with DropdownButton2. Use itemHeight Property to do that.

Disclaimer: I am the author of the package mentioned above.

Upvotes: 3

Hardik Mehta

Reputation: 2425

Please check this :

import 'package:flutter/material.dart';

void main() {
  runApp(Nav2App());
}

class Nav2App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? sid;
  List data = [{"nome":"Acura Acura Acura Acura ","codigo":"1 2 3 4 5 6 7 8 9 10 11 12 1"},
               {"nome":"Agrale Agrale","codigo":" 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 "}
              ];
  
  
  PageController _scrollController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
    children: <Widget>[
      Expanded(
        child: Container(
          width: 200,
          child: InputDecorator(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton(
                isDense: true,
                isExpanded: true,
                value: sid,
                hint: Text("Select Data",
                    style: TextStyle(color: Colors.black)),
                items: data.map((item) {
                  return DropdownMenuItem(
                    child: Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start, 
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            item['nome'].toString(),
                          ),
                          Flexible( child:Container(
                            child:  Text(
                              item['codigo'].toString(),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            padding: EdgeInsets.only(left: 10.0)
                          ),),
                        ]),
                        padding: EdgeInsets.only(bottom: 10),
                      ),
                    value: item['codigo'].toString(),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() {
                    sid = value as String?;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    ],
  ),
      
    );
  }
}

just wrap second Container of Column for subtitle with Flexible widget.

Edited: for multiline title and subtitle:

import 'package:flutter/material.dart';

void main() {
  runApp(Nav2App());
}

class Nav2App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? sid;
  List data = [
    {
      "nome": "Acura Acura Acura Acura Acura Acura Acura",
      "codigo": "1 2 3 4 5 7 8 9 10 12 76 7 8 9 22 23 34 45"
    },
    {
      "nome": "Agrale Agrale",
      "codigo": " 8 9 10 11 12 2 23 34 56 78 90 11 12 34"
    }
  ];

  PageController _scrollController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 250,
            child: InputDecorator(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              child: DropdownButtonHideUnderline(
                child: DropdownButton(
                  itemHeight: 70,
                  isExpanded: true,
                  isDense: true,
                  value: sid,
                  hint: Text("Select Data",
                      style: TextStyle(color: Colors.black)),
                  items: data.map((item) {
                    return DropdownMenuItem(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Flexible(
                            child: Text(
                              item['nome'].toString(),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Flexible(
                            child: Text(
                              item['codigo'].toString(),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                      value: item['codigo'].toString(),
                    );
                  }).toList(),
                  onChanged: (value) {
                    setState(() {
                      sid = value as String?;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

let me know if its works for you or not.

Upvotes: 1

Ravindra S. Patil

Reputation: 14775

Try below code hope its help to you. Refer ListTile here

String? sid;
  List data = [];
  var urls = "https://parallelum.com.br/fipe/api/v1/carros/marcas";

Your API call function:

Future fetchData() async {
    var result = await http.get(Uri.parse(urls), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    var jsonData = json.decode(result.body);

    setState(() {
      data = jsonData;
    });
    return jsonData;
  }

call your API fetchData() inside initState()

@override
  void initState() {
    fetchData();
    super.initState();
  }

Your Dropdown Widget:

Container(
    margin: EdgeInsets.all(20),
    width: 200,
    height: 70,
    decoration: BoxDecoration(
      border: Border.all(),
      borderRadius: BorderRadius.circular(
        20,
      ),
    ),
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        isDense: true,
        isExpanded: true,
        value: sid,
        hint: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "Select Data",
            style: TextStyle(
              color: Colors.black,
            ),
          ),
        ),
        items: data.map((list) {
          return DropdownMenuItem(
            child: ListTile(
              title: Text(list['nome']),
              subtitle: Text(list['nome']),
            ),  
            value: list['codigo'].toString(),
          );
        }).toList(),
        onChanged: (value) {
          setState(() {
            sid = value as String?;
          });
        },
      ),
    ),
  ),

Result screen for dropdown button ->

Result Screen for Dropdown list->

Result screen after selected dropdown item->

Upvotes: 3

DropDownButton: Adjust height of items

Answers (3)

Related Questions