-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.f: themingStyling widgets with a themeStyling widgets with a themefound in release: 3.35Found to occur in 3.35Found to occur in 3.35found in release: 3.37Found to occur in 3.37Found to occur in 3.37frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
Steps to reproduce
General
The SearchBar widget inherits the InputDecoration theme data defined in the MaterialApp. Specifically the BorderSide, but cannot be overriden.
Steps to reproduce
- Use the SearchBar template from the docs.
- Add a new inputDecoration definition for to the app's theme:
brightness: isDark ...,
inputDecorationTheme: InputDecorationTheme(
disabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF807B7B)),
borderRadius: BorderRadius.all(Radius.circular(8)),
),
),- Set the SearchBar's enabled property to
false:
child: SearchBar(
enabled: false,
controller: controller,
...
)- Hot reload.
- Notice the InputBorder around the TextField area.
- Try to override the
InputDecorationThemelocally to remove the border, by wrapping the SearchBar widget in it with the overriding properties:
return InputDecorationTheme(
data: InputDecorationThemeData(
disabledBorder: const OutlineInputBorder(
borderSide: BorderSide.none,
),
),
child: SearchBar(
enabled: false,
controller: controller,
...
),
);- Notice that it doesn't go away still.
- Replace the app-level inputDecorationTheme to the desired borderSide:
brightness: isDark ...,
inputDecorationTheme: InputDecorationTheme(
disabledBorder: const OutlineInputBorder(
borderSide: BorderSide.none,
),
),- The Border does go away but then I can't defined my desired theme app-wide first
Other notes
I have a different theming and styling for my TextField widgets. This makes my SearchBar widgets ugly when I should be able to override the theme definition.
This issue might relate to #131666.
Expected results
Should be able to override the inputDecoration in my SearchTheme or so.
Actual results
SearchBar imbibes the InputDecorationTheme, but cannot be overridden, leading to ugly UI.
Code sample
Code sample
import 'package:flutter/material.dart';
/// Flutter code sample for [SearchBar].
void main() => runApp(const SearchBarApp());
class SearchBarApp extends StatefulWidget {
const SearchBarApp({super.key});
@override
State<SearchBarApp> createState() => _SearchBarAppState();
}
class _SearchBarAppState extends State<SearchBarApp> {
bool isDark = false;
@override
Widget build(BuildContext context) {
final ThemeData themeData = ThemeData(
brightness: isDark ? Brightness.dark : Brightness.light,
inputDecorationTheme: InputDecorationTheme(
disabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFF807B7B)),
borderRadius: BorderRadius.all(Radius.circular(8)),
),
),
);
return MaterialApp(
theme: themeData,
home: Scaffold(
appBar: AppBar(title: const Text('Search Bar Sample')),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SearchAnchor(
builder: (BuildContext context, SearchController controller) {
return InputDecorationTheme(
data: InputDecorationThemeData(
disabledBorder: const OutlineInputBorder(
borderSide: BorderSide.none,
),
),
child: SearchBar(
enabled: false,
controller: controller,
padding: const WidgetStatePropertyAll<EdgeInsets>(
EdgeInsets.symmetric(horizontal: 16.0),
),
onTap: () {
controller.openView();
},
onChanged: (_) {
controller.openView();
},
leading: const Icon(Icons.search),
trailing: <Widget>[
Tooltip(
message: 'Change brightness mode',
child: IconButton(
isSelected: isDark,
onPressed: () {
setState(() {
isDark = !isDark;
});
},
icon: const Icon(Icons.wb_sunny_outlined),
selectedIcon: const Icon(Icons.brightness_2_outlined),
),
),
],
),
);
},
suggestionsBuilder:
(BuildContext context, SearchController controller) {
return List<ListTile>.generate(5, (int index) {
final String item = 'item $index';
return ListTile(
title: Text(item),
onTap: () {
setState(() {
controller.closeView(item);
});
},
);
});
},
),
),
),
);
}
}Screenshots or Video
Logs
No response
Flutter Doctor output
Doctor output
Flutter (Channel stable, 3.35.4, on macOS 15.6.1 24G90 darwin-arm64, locale en-US) [4.2s]
• Flutter version 3.35.4 on channel stable at /Users/mehul/.puro/envs/scan_app/flutter
! Warning: `flutter` on your path resolves to /Users/mehul/.puro/envs/stable/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at
/Users/mehul/.puro/envs/scan_app/flutter. Consider adding /Users/mehul/.puro/envs/scan_app/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/mehul/.puro/envs/stable/flutter/bin/dart, which is not inside your current Flutter SDK checkout at
/Users/mehul/.puro/envs/scan_app/flutter. Consider adding /Users/mehul/.puro/envs/scan_app/flutter/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision d693b4b9db (13 days ago), 2025-09-16 14:27:41 +0000
• Engine revision c298091351
• Dart version 3.9.2
• DevTools version 2.48.0
• Feature flags: no-enable-web, no-enable-linux-desktop, no-enable-macos-desktop, no-enable-windows-desktop, enable-android, enable-ios, cli-animations,
enable-swift-package-manager, enable-lldb-debugging
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [5.4s]
• Android SDK at /Users/mehul/Library/Android/sdk
• Emulator version 36.1.9.0 (build_id 13823996) (CL:N/A)
• Platform android-36, build-tools 36.0.0
• Java binary at: /Users/mehul/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.7+-13880790-b1038.58)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 26.0.1) [5.4s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 17A400
• CocoaPods version 1.16.2
[✓] Android Studio (version 2025.1) [29ms]
• Android Studio at /Users/mehul/Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.7+-13880790-b1038.58)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.1) [27ms]
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.104.1) [9ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.118.0
[✓] Connected device (1 available) [6.0s]
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 16 (API 36) (emulator)
! Error: Browsing on the local area network for iPhone van Bart. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this
Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for Didata’s iPhone 16 (It’s Pink!). Ensure the device is unlocked and attached with a cable or associated with the same local area
network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [239ms]
• All expected network resources are available.Metadata
Metadata
Assignees
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.f: themingStyling widgets with a themeStyling widgets with a themefound in release: 3.35Found to occur in 3.35Found to occur in 3.35found in release: 3.37Found to occur in 3.37Found to occur in 3.37frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Type
Projects
Status
Done (PR merged)
