Tell me how can I make a dropdown list but so that the elements are in the form of cards with an image (I attached a screenshot of what I need to do below)? It is also necessary that the selected element be displayed without an arrow and with an image.

CodePudding user response：

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => new _TestState();
}

class _TestState extends State<Test> {
  var _img = new Image.network("https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/TUCPamplona10.svg/500px-TUCPamplona10.svg.png");
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Test Drop"),),
      body: new Center(
        child: new Container (
            height: 50.0,
            child:new DropdownButton(
            items: new List.generate(10, (int index){
          return new DropdownMenuItem(child: new Container(
            padding: const EdgeInsets.only(bottom: 5.0),
            height: 100.0,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _img,
                new Text("Under 10")
              ],
            ),
          ));
        }) 
        , onChanged: null),),
      ),
    );
  }
}

this gif will give you better idea

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int? _value = 0;

  void _setValue(int? value) {
    setState(() {
      _value = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(50, 47, 61, 1),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 12),
          decoration: BoxDecoration(
              color: const Color.fromRGBO(57, 56, 69, 1),
              borderRadius: BorderRadius.circular(12),
              boxShadow: const [
                BoxShadow(
                    color: Colors.black26,
                    spreadRadius: 5,
                    blurRadius: 12,
                    offset: Offset(0, 0))
              ]),
          child: DropdownButton(
            itemHeight: 124,
            icon: const SizedBox.shrink(),
            value: _value,
            underline: Container(),
            dropdownColor: const Color.fromRGBO(57, 56, 69, 1),
            onChanged: _setValue,
            borderRadius: BorderRadius.circular(12),
            items: [
              for (var i = 0; i < 10; i  )
                DropdownMenuItem(
                    value: i,
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.0),
                          child: Image(
                              image: NetworkImage(
                                  'https://source.unsplash.com/random/100x100?sig=$i&cars')),
                        ),
                        const SizedBox(width: 8),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Test title $i',
                              style: const TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                            const SizedBox(height: 16),
                            Text(
                              'Test $i',
                              style: const TextStyle(color: Colors.white),
                            ),
                          ],
                        ),
                      ],
                    ))
            ],
          ),
        ),
      ),
    );
  }
}