Flutter Dropdown with Icon Example Tutorial

Flutter , Android Studio

Nicesnippets

10025

16-07-2020


Flutter Dropdown with Icon Example Tutorial

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...