Change Item Text Size Of Dropdown In Flutter App

admin_img Posted By Bajarangi soft , Posted On 25-09-2020

We are going to learn how to to change the item text size of a DropDownButton in Flutter.

Change Item Text Size With Dropdown In Flutter App

Complete COde For Change Item Text Size Of Dropdown In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.deepPurple[400],
            title: Text("Change Text Size Dropdown"),
          ),
          body: SafeArea(
              child : Center(
                child:ChangeSizeDropDown(),
              )
          )
      ),
    );
  }
}


class ChangeSizeDropDown extends StatefulWidget {
  @override
  ChangeTextSizeDropdownState createState() {
    return new ChangeTextSizeDropdownState();
  }
}

class ChangeTextSizeDropdownState extends State<ChangeSizeDropDown> {
  List<double> _size = [5,10, 15, 20,22, 27, 27.0,28, 28.0];
  double _selectedSize = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<double>(
              items: _size
                  .map((size) => DropdownMenuItem<double>(
                child: Text(
                  "Size: " + size.toString(),
                  style: TextStyle(
                    fontSize: _selectedSize,
                  ),
                ),
                value: size,
              ))
                  .toList(),
              onChanged: (double value) {
                setState(() => _selectedSize = value);
              },
              hint: Text(
                "Change Text Size",
                style: TextStyle(
                  fontSize: _selectedSize,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Related Post