DropDownButton: Adjust height of items

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

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 -> enter image description here

Result Screen for Dropdown list-> enter image description here

Result screen after selected dropdown item-> enter image description here

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.

enter image description here

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?;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

enter image description here

let me know if its works for you or not.

DropDownButton: Adjust height of items

Related

Recent Posts