Comments (5)
@nelci592 , I think your validation is returning null every time. Try removing your validation and returning a simple string instead to see if it works.
from dropdown_button2.
@yashanghan22 I have tested on this sample project, however, on error, the underline's color remains the same:
import 'package:dropdown_example/dropdown/dropdown_button2.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'DropdownButton2 Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> items = [
'Item1',
'Item2',
'Item3',
'Item4',
'Item5',
'Item6',
'Item7',
'Item8'
];
final valueListenable = ValueNotifier<String?>(null);
AutovalidateMode _autoValidateMode = AutovalidateMode.disabled;
final GlobalKey<FormState> _formKey = GlobalKey();
@override
void initState() {
_autoValidateMode = AutovalidateMode.onUserInteraction;
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Form(
key: _formKey,
child: SizedBox(
width: 400,
child: DropdownButtonFormField2<String>(
autovalidateMode: _autoValidateMode,
isExpanded: true,
hint: const Row(
children: [
Icon(
Icons.list,
size: 16,
color: Colors.yellow,
),
SizedBox(
width: 4,
),
Expanded(
child: Text(
'Select Item',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.yellow,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
items: items
.map((String item) => DropdownItem<String>(
value: item,
height: 40,
child: Text(
item,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
overflow: TextOverflow.ellipsis,
),
))
.toList(),
valueListenable: valueListenable,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please select an option';
}
return null;
},
onChanged: (value) {
valueListenable.value = value;
},
decoration: const InputDecoration(
labelText: "Text ",
floatingLabelBehavior: FloatingLabelBehavior.auto,
labelStyle: TextStyle(
color: Color(0xFF7F849D),
fontSize: 15,
height: 0.3,
),
errorBorder: UnderlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(1)),
borderSide: BorderSide(color: Colors.red, width: 1)),
focusedBorder: UnderlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(1)),
borderSide:
BorderSide(color: Color(0xFF2A2C42), width: 1)),
border: UnderlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(1)),
borderSide:
BorderSide(color: Color(0xFF2A2C42), width: 1)),
enabledBorder: UnderlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(1)),
borderSide:
BorderSide(color: Color(0xFF2A2C42), width: 1)),
isDense: true,
hintStyle: TextStyle(
color: Color(0xFF7F849D),
fontSize: 15,
),
),
buttonStyleData: const ButtonStyleData(
height: 50,
width: 160,
padding: EdgeInsets.only(left: 14, right: 14),
elevation: 2,
),
iconStyleData: const IconStyleData(
icon: Icon(
Icons.arrow_forward_ios_outlined,
),
iconSize: 14,
iconEnabledColor: Colors.yellow,
iconDisabledColor: Colors.grey,
),
dropdownStyleData: DropdownStyleData(
maxHeight: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
color: Colors.grey,
),
offset: const Offset(-20, 0),
scrollbarTheme: ScrollbarThemeData(
radius: const Radius.circular(40),
thickness: MaterialStateProperty.all<double>(6),
thumbVisibility: MaterialStateProperty.all<bool>(true),
),
),
menuItemStyleData: const MenuItemStyleData(
padding: EdgeInsets.only(left: 14, right: 14),
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 50),
child: TextButton(
onPressed: () {
_formKey.currentState?.validate();
},
child: const Text("Validate")),
)
]),
),
);
}
}
from dropdown_button2.
Can you change the color of all the underlined borders to blue, black, or grey? Do not change the error border color.
Then see if it's work or not because you are giving light red color to focused border, border, enabled border so it might be showing like same colour as error border colour.
from dropdown_button2.
I have already tested this but it does not seem to work. You can check the sample project that I attached.
dropdown_example.zip
from dropdown_button2.
@nelci592
Let me know if it's the solution of your problem
dropdown.error.border.issue.webm
solution:
In the input decoration, there is a parameter called errorText
, which is a string that can be empty (nullable). By default, its value is null (empty).
- If
errorText
is not null (has some text), the inputDecoration will show an error border. - If
errorText
is null (empty), the inputDecoration will show a regular border.
I created a variable that will show an error based on validation. For more details, please check the updated code file.
Here is the project with updated code:
dropdown_example.zip
let me know if there is an issue in this code.
from dropdown_button2.
Related Issues (20)
- The splash effect goes above the error / validation text
- Close programatically on Escape pressed HOT 4
- How can i create menu items with exactly height for each element
- Not possible to have label, text and dropdown values all aligned with OutlineInputBorder HOT 2
- Show selected item when page initialized HOT 6
- onChanged doesn't work when using multiValueListenable HOT 2
- DropdownButtonFormField2 initial value
- barrierCoversButton: false property not working
- Not resetting the search querry before reopening the menu breaks the dropdown menu scroll position calculation algorithm
- The package interferes with TextField HOT 1
- Being able to set the errorText
- Ink splashes get displayed over search widget HOT 2
- Disable focus on DropdownItem HOT 11
- How to wrap TapRegion with groupID around DropdownButtonFormField2 to track TapInside / TapOutside with other TapRegions
- Add an ability to override comparator function HOT 8
- On mobile once keyboard open it's pushing the dropdown to top HOT 6
- Use onMenuStateChange & FocusNode for TextField not working
- How to change disabled style?
- Please add label text property
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dropdown_button2.