I need to change the color of the trailing keyboard_down_arrow in ExpansionTile. I have tried wrapping it in Theme widget and setting accent, primary and IconTheme also, but nothing seems to work.
Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
accentColor: Colors.black,
),
child: ExpansionTile(
//
title: Text("Some Text"
),
childrenPadding: EdgeInsets.symmetric(horizontal: 15),
children: [
],
),
),
I have latest solution with both open/close state:
Theme(
data: Theme.of(context).copyWith(
unselectedWidgetColor: Colors.white, // here for close state
colorScheme: ColorScheme.light(
primary: Colors.white,
), // here for open state in replacement of deprecated accentColor
dividerColor: Colors.transparent, // if you want to remove the border
),
child: ExpansionTile(
...
),
),...
I found the solution to the above problem.
set unselectedWidgetColor property to the color you want in Theme class in flutter.
To change the trailing icon Color you can use the fallowing parameter in Expansion Tile
trailing: Icon(
Icons.keyboard_arrow_down,
color: Colors.green,
),
Example:
ExpansionTile(
//
title: Text("Some Text"),
trailing: Icon(
Icons.keyboard_arrow_down,
color: Colors.green,
),
),
And for theme Color use color: Theme.of(context).primaryColor,
Related
I'm trying to add shape and splach color to my textButton But I always got :
The named parameter 'shape' and 'splashColor' isn't defined On my flutter application
this is the code:
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("Flutter Bluetooth"),
backgroundColor: Colors.deepPurple,
actions: <Widget>[
TextButton.icon(
icon: Icon(
Icons.refresh,
color: Colors.white,
),
label: Text(
"Refresh",
style: TextStyle(
color: Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
splashColor: Colors.deepPurple,
onPressed: () async {
// So, that when new devices are paired
// while the app is running, user can refresh
// the paired devices list.
await getPairedDevices().then((_) {
show('Device list refreshed');
});
},
),
],
),
I would be really thankful if you can help me and Thanks in advance.
TextButton.icon doesnt have those properties. for splashcolor you can wrap your button with inkwell and give the property there and you can wrap this inkwell wth a container and in this give a decoration property with BoxDecoration and give border in here
I'm making a drawer, and I want to change the background color, but when I select the color on the container, the color change onhover is not shown, if the color is as deffault works as usual
drawer
return new Drawer(
child: Container(
height: _containerHeight,
color: const Color(0xff68778d),
child: ListView(
padding: EdgeInsets.zero,
itemExtent: _containerHeight < 900 ? _containerHeight/_numberOfListTiles: null,
children: [
listTile("assets/image1", "profile", ""),
),
],
),
)
);
List tile
Widget listTile(asset, text, action) {
return new ListTile(
hoverColor: const Color(0xff545e8b),
leading: Image.asset(
asset,
fit: BoxFit.fitHeight,
),
title: Text(
text,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.white,
),
),
onTap: (){
action;
}
);
}
is there any way to change the background color and seeing the hover animation?
You should change canvasColor in your ThemeData in main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: YourHomeWidget(),
theme: ThemeData.light().copyWith(
canvasColor: Colors.grey,
),
));
}
I have answered your question here.
There's no such property in ElevatedButton and OutlinedButton widget to change the disabled color like a regular RaisedButton.
ElevatedButton(
onPressed: null,
disabledColor: Colors.brown, // Error
}
Use onSurface property if you only want to change the disabled color (this property is also available in OutlinedButton).
ElevatedButton(
onPressed: null,
style: ElevatedButton.styleFrom(
onSurface: Colors.brown,
),
child: Text('ElevatedButton'),
)
For more customizations, use ButtonStyle:
ElevatedButton(
onPressed: null,
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
if (states.contains(MaterialState.disabled)) {
return Colors.brown; // Disabled color
}
return Colors.blue; // Regular color
}),
),
child: Text('ElevatedButton'),
)
To apply it for all the ElevatedButton in your app:
MaterialApp(
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
onSurface: Colors.brown
),
),
),
)
In situation where you want to set an elevated button theme within your app, you can use this:
ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
onSurface: Colors.brown
),
child: Text('ElevatedButton')
))
I changed the background color of the appBar in one of my screens. It's now white, but the device time display and icons like the wifi icon don't show. How can I change the color of these device icons?
This is what I have now:
This is what I want to achieve
Here is my appBar code
child: Scaffold(
backgroundColor: KjobbersAppTheme.white,
appBar: AppBar(
elevation: 0.0,
textTheme: TextTheme(
title: TextStyle(
color: Colors.grey,
fontSize: 20.0,
)),
backgroundColor: KjobbersAppTheme.white,
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: AppTheme.grey,
),
onPressed: () => Navigator.pop(context),
),
iconTheme: IconThemeData(color: Colors.grey, size: 20),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.search),
onPressed: () {},
),
],
),
Set the brightness property of the AppBar to Brightness.light. It will change all the status bar icons to a darker color.
Example-
AppBar(
brightness: Barightness.light,
//Rest of your code will remain same
)
Alternatively, if the AppBar has a dark backgroundColor, you can set it to Brightness.dark, to force the AppBar to have light colored icons.
I have Image.asset wrapped on Tooltip
Padding(
padding: edgeInsets,
child: Tooltip(preferBelow: false, message: "Miejsca parkingowe ogólnodostępne", child: Image.asset("assets/icons/garage.png", width: _iconSize, height: _iconSize,)),
),
How to set tooltip message text color and background color?
ToolTip supports the decoration named argument, so you don't need to change your top-level theme.
/// Specifies the tooltip's shape and background color.
///
/// If not specified, defaults to a rounded rectangle with a border radius of
/// 4.0, and a color derived from the [ThemeData.textTheme] if the
/// [ThemeData.brightness] is dark, and [ThemeData.primaryTextTheme] if not.
final Decoration decoration;
However, there are other widgets, that include the ToolTip widget in their build method, for example, IconButton where they only support a tooltip as a String, so there's no way currently to change the tooltip style for the IconButton
You can change color of tootip with textStyle attribute. and background color of tooltip with decoration attribute.
Padding(
padding: edgeInsets,
child: Tooltip(textStyle: TextStyle(color: Colors.white),decoration: BoxDecoration(color: Colors.red),text preferBelow: false, message: "Miejsca parkingowe ogólnodostępne",
child: Image.asset("assets/icons/garage.png", width: _iconSize, height: _iconSize,)),
),
I think, Tooltip does'not provide a parameter to change these behaviors but
Tooltip takes the your theme
final ThemeData theme = Theme.of(context);
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
textTheme: theme.brightness == Brightness.dark ? theme.textTheme : theme.primaryTextTheme,
platform: theme.platform,
);
so you can create theme in your MaterialApp (Text color works but backgroundColor does'not work in my app, you can give a try)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
backgroundColor: Colors.amber,
primaryTextTheme: TextTheme(
body1: TextStyle(
color: Colors.blue,
)
),
primarySwatch: Colors.blue,
),
home: ......
or
This is Tooltip code may be you can change from the source code of the Tooltip which is an bad solution.
return Positioned.fill(
child: IgnorePointer(
child: CustomSingleChildLayout(
delegate: _TooltipPositionDelegate(
target: target,
verticalOffset: verticalOffset,
preferBelow: preferBelow,
),
child: FadeTransition(
opacity: animation,
child: Opacity(
opacity: 0.9,
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: height),
child: Container(
decoration: BoxDecoration(
color: darkTheme.backgroundColor,
borderRadius: BorderRadius.circular(2.0),
),
padding: padding,
child: Center(
widthFactor: 1.0,
heightFactor: 1.0,
child: Text(message, style: darkTheme.textTheme.body1),
),
),
),
),
),
),
),
);
You can create a TooltipThemeData and set it into your top-level ThemeData.
TooltipThemeData(
textStyle: TextStyle(
color: Colors.white,
fontFamily: "Questrial",
fontWeight: FontWeight.bold,
),
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(20),
),
);
It's possible set the color of an individual icon's tooltip by setting TooltipTheme as the parent widget, for example as follows:
TooltipTheme(
data: TooltipThemeData(
textStyle: TextStyle(fontSize: 15, color: Colors.white),
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
),
child: IconButton(
tooltip: 'Icon Title',
icon: Icon(Icons.analytics, color: Colors.black, size: 50),
onPressed: () {}
),
)
As per the documentation.