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.
Related
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.
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,
EDIT: I've tried wrapping the Container in a Material widget and moving the color property to the Material widget, but I'm placing a bunch of ResourceCards in a horizontal ListView, so the color from the Material widget seems to only fill the space around the ResourceCard.
I've created my own widget ResourceCard in Flutter. I wrapped it with a GestureDetector to detect taps, but I want to show some sort of feedback or effect to notify the user that it was tapped. I decided to replace the GestureDetector with an InkWell widget, but I don't see the splash effect through the container's linear-gradient and colour, so I just reverted it back to a GestureDetector. I've seen other posts with potential workarounds, but none of them work with a linear gradient and color. Here's what one of the ResourceCard widgets look like: https://imgur.com/dg3fu9e. Here's the widget's code:
class ResourceCard extends StatelessWidget {
ResourceCard({
#required this.colour,
#required this.margin,
#required this.cardText,
this.onPress,
#required this.cardCaption,
#required this.paddingText,
});
final Color colour;
final String cardText;
final Function onPress;
final EdgeInsets margin;
final String cardCaption;
final EdgeInsets paddingText;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Column(
children: <Widget>[
Container(
width: 75.0,
height: 75.0,
child: Center(
child: Text(
cardText,
style: TextStyle(
color: Colors.white,
fontFamily: 'Circular STD',
fontWeight: FontWeight.w900,
fontSize: 20.0,
),
),
),
margin: margin,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [colour, Colors.blue],
),
color: colour,
borderRadius: BorderRadius.circular(15.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.5),
blurRadius: 10.0,
spreadRadius: 1.0,
)
],
),
),
Padding(
padding: paddingText,
child: Text(
cardCaption,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.w300,
fontSize: 10.0,
fontFamily: 'Circular STD',
),
),
),
],
),
);
}
}
The easiest solution is to use a Material widget as parent of the InkWell and set its color to transparent. The InkWell must be set on the card only (in your example the GestureDetector is set on the whole column). To fit the exact shape, the InkWell gets the same borderRadius as your Card (Container)
Here is a solution of your build method. I placed the InkWell and Materal widget as parent of the Center widget
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
width: 75.0,
height: 75.0,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onPress,
borderRadius: BorderRadius.circular(15.0),
splashColor: Colors.grey[500],
child: Center(
child: Text(
cardText,
style: TextStyle(
color: Colors.white,
fontFamily: 'Circular STD',
fontWeight: FontWeight.w900,
fontSize: 20.0,
),
),
),
),
),
...
Just set the background color you want on the Material class:
Material(
color: Colors.grey.shade200, // background color
child: InkWell(
onTap: () {},
splashColor: Colors.grey.shade300, // splash color
child: Container(
// content
),
),
);
I need to change the border color and width of the OutlineButton, I know one way of doing this by directly mentioning it inline as below:
OutlineButton(
child: Text('SIGN IN'),
padding: EdgeInsets.all(8.0),
onPressed: handleSignIn,
borderSide: BorderSide(
color: Colors.white, //Color of the border
style: BorderStyle.solid, //Style of the border
width: 1, //width of the border
),
)
If I do it as mentioned below, it's effecting FlatButton and RaisedButton and this is NOT effecting OutlineButton.
MaterialApp(
title: 'MyApp',
theme: ThemeData(
buttonTheme: ButtonThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
// this effects to FlatButton and RaisedButton
side: BorderSide(
color: Colors.white, //Color of the border
style: BorderStyle.solid, //Style of the border
width: 1, //width of the border
),
),
),
),
);
So, How to change border color and width ONLY of OutlineButton globally (through out the app)?
I don't think you can do for that in OutlineButton. So, what i can suggest you is to create a global theme data in a global file.
var borderData=BorderSide(
color: Colors.white, //Color of the border
style: BorderStyle.solid, //Style of the border
width: 1, //width of the border
)
Then you can easily use it any class just by importing that global file.
OutlineButton(
child: Text('SIGN IN'),
padding: EdgeInsets.all(8.0),
onPressed: handleSignIn,
borderSide: borderData,
)
This will reduce your boiler plate code in your case.
Unless borderSide is explicitly added to the OutlineButton, it will default to a width of 1.0, a style of solid and this color:
Theme.of(context).colorScheme.onSurface.withOpacity(0.12)
You have the option of changing onSurface of your app theme, but that will affect other widgets as well.
You can do what Jay suggested in the other answer, but my preference would be to create a different widget. This way, if you ever want to change anything else to all of your OutlineButtons in the future, you only need to change your custom widget:
import 'package:flutter/material.dart';
class OutlineButton2 extends OutlineButton {
const OutlineButton2({
Key key,
#required VoidCallback onPressed,
Widget child,
}) : super(
key: key,
onPressed: onPressed,
child: child,
borderSide: const BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 1,
),
);
}
This class is deprecated, please use OutlinedButton instead
OutlinedButton(
style: TextButton.styleFrom(
primary: primaryColor,
side: BorderSide(color: primaryColor),
minimumSize: Size(200, 50),
),
child: Text('SIGN IN'),
),
try deleting the OutlineButton
Try the code below:
GestureDetector(
child: Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 2.0,
color: Theme.of(context).primaryColor)),
),
child: Text('SIGN IN'),
),
onTap: onPressed,
),
basically the GestureDetector will take the onPressed logic code and the container is gonna give the decoration as you ask from it with the Text inside
I have two Containers of height 250 inside Column widget. There is no any other widget present between this two Container widget but still I can see very little space between two containers.
Here's my code...
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Example(),
);
}
}
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
double height = 250;
TextStyle containerTextStyle = TextStyle(color: Colors.white, fontSize: 24);
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: height,
color: Colors.black,
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
height: height,
color: Colors.black,
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
],
),
);
}
}
I don't know why but if I set the height of this containers to 100 or 400 it is not showing any space between container. Did not try with many different values for height but space is visible for some value and not visible for other value.
Here's the screenshot from my phone...
Both Containers height is equal to 250
Both Containers height is equal to 400
Replace your scaffold with this:
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: height,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.black),
color: Colors.black,
),
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
height: height,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.black),
color: Colors.black,
),
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
],
),
);
As #sukhi said,
You need to use the BoxDecoration in your Container.
But Rather than giving border Color you can simple set width of border to 0.
Like Below:
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(width: 0),
),
height: height,
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(width: 0),
),
height: height,
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
And Do not forget to give your color inside BoxDecoration instead of Container itself else it will throw an error.
Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".
A bit late, but currently seems to be an open Flutter issue. My solution was similar to other answers, but as the color in my case had opacity, I had to wrap the problematic container with another container, and add the decoration to the parent container:
decoration: BoxDecoration(
color: Colors.black, //the color of the main container
border: Border.all(
//apply border to only that side where the line is appearing i.e. top | bottom | right | left.
width: 2.0, //depends on the width of the unintended line
color: Colors.black,
),
),
As suggested from https://github.com/flutter/flutter/issues/14288#issuecomment-668795963