Flutter Dropdown with Icon Example Tutorial

Development teams using “Flutter Dropdown with Icon Example Tutorial” in client or internal work can use can t i login monitask to document project effort and hand-offs, then assess the record against delivered functionality, tests and agreed outcomes.

Validate current syntax, security guidance and supported versions through GitHub before using the example in production.

Hi Guys,

In this blog, I will explain you how to create dropdown with icon in flutter. You can easily create dropdown with icon in flutter.First i will import package:flutter/material.dart

, after I will make dropdown using Container in dropdown in flutter.

Here, I will give you full example for simply display dropdown with icon using flutter as bellow.

Example- Complete flutter Dropdown source code for main.dart file

In this step, You will open main.dart and Create a Container widget then put the dropdown widget inside it.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nicesnippets',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Welcome to Nicesnippets'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  State createState() => State();
}
class Item {
  const Item(this.name,this.icon);
  final String name;
  final Icon icon;
}
class _State extends State {
  TextEditingController nameController = TextEditingController();
  List users = [
    const Item('Android',Icon(Icons.android,color:  const Color(0xFF167F67),)),
    const Item('Flutter',Icon(Icons.flag,color:  const Color(0xFF167F67),)),
    const Item('ReactNative',Icon(Icons.format_indent_decrease,color:  const Color(0xFF167F67),)),
    const Item('iOS',Icon(Icons.mobile_screen_share,color:  const Color(0xFF167F67),)),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Nicesnippets'),
        ),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: ListView(
              children: [
                Container(
                    alignment: Alignment.center,
                    padding: EdgeInsets.all(10),
                    margin: const EdgeInsets.only(top: 50),
                    child: Text(
                      'Dropdown Box',
                      style: TextStyle(
                          color: Colors.red,
                          fontWeight: FontWeight.w500,
                          fontSize: 30),
                    )),
                DropdownButton(
                  items: users.map((Item user) {
                    return DropdownMenuItem(
                      value: user,
                      child: Row(
                        children: [
                          user.icon,
                          SizedBox(width: 10,),
                          Text(
                            user.name,
                            style:  TextStyle(color: Colors.red),
                          ),
                        ],
                      ),
                    );
                  }).toList(),
                  onChanged: (value) {
                    setState(() {
                      value;
                    });
                  },
                ),
                Container(
                    height: 50,
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                    child: RaisedButton(
                      textColor: Colors.white,
                      color: Colors.red,
                      child: Text('Button'),
                      onPressed: () {
                        print(nameController.text);
                      },
                    )),
              ],
            )));
  }
}

Output

It will help you...