创建自定义下拉菜单 flutter

Question

I am trying to create a custom drop down menu for my app, I have a picture of what it should look like. I have been searching online to see if there are any similar ideas, although everything I'm finding does not support null safety and so I am running into problems. If it comes down to it I will try and code my own drop down although if anyone could lead me in the right direction that would be great only because I'm new to flutter.

Also I have tried using DropdownButton in flutter but it does not produce what I am looking for.

Answer 1

Use DropDown button class, here is a complete running code, you can run it in dartpad

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

static const String _title = 'Flutter Code Sample';

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: _title,
  home: Scaffold(
    appBar: AppBar(title: const Text(_title)),
    body: const Center(
      child: MyStatefulWidget(),
     ),
   ),
 );
 }
}

class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);

@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String dropdownValue = 'One';

@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? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['One', 'Two', 'Free', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
);
}
}

Answer 2

You can achieve that using DropdownButton2 .

Check out Example 3 of How to add different height items like dividers and check out Options to see all parameters you can use to customize DropdownButton2 to your design.

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