Bottom line doesn't change color when is focused in desktop application. about dropdown_button2

[AhmedLSayed9]

Nvm, I'll fix it soon

[AhmedLSayed9]

Can you provide an example using DropdownButtonFormField ?

[claudiobsi]

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyHomePage(title: "DropDownButton Sample",));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: SafeArea(
            child: Form(
              child: SizedBox(
                width: 200,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    DropdownButtonFormField(
                      items: _getItems(),
                      onChanged: (_) {},
                    ),
                    const Divider(),
                    DropdownButtonFormField(
                      items: _getItems(),
                      onChanged: (_) {},
                    ),
                    DropdownButtonFormField2(
                      items: _getItems(),
                      onChanged: (_) {},
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  List<DropdownMenuItem<String>> _getItems() {
    return ["Option 1", "Option 2"]
        .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList();
  }
}

[AhmedLSayed9]

I added some offset so you can observe the focus color, it works fine:

Screen.Recording.2023-06-17.at.4.45.00.AM.mov

or you mean it doesn't stay highlighted after selecting an option?

[AhmedLSayed9]

I think you're misunderstanding that the current behavior of flutter's dropdown highlighting is not proper. The button shouldn't stay highlighted after closing the menu. (Edit: Button should stay highlighted when menu closes) Also, it loses focus when menu is open (but you can't see it as the menu is covering the button), see flutter/flutter#94605

However, the dropdown menu is stealing the focus from the underlying button (the grey color) which is a core flutter issue.
I'll push a temporary solution for it anyway so that the button maintain focused properly when menu open and unfocus when it's closed.

[claudiobsi]

I added some offset so you can observe the focus color, it works fine:
Screen.Recording.2023-06-17.at.4.45.00.AM.mov

or you mean it doesn't stay highlighted after selecting an option?

Thanks for fast reply.

I meant when using the TAB key to navigate between widgets.

2023-06-16.18-22-28.mp4

[AhmedLSayed9]

Check DropdownButtonFormField2. You should set isDense: true, and contentPadding: EdgeInsets.zero,.

[AhmedLSayed9]

wait, focus border is not highlighted, let me check

[AhmedLSayed9]

Also, the behavior of increasing height/width through button data and setting isDense: true, and contentPadding: EdgeInsets.zero may not be needed anymore.