I'm using Flutter's OutlineButton Widget, and I can't figure out how to remove that weird black background highlight when the button is clicked / pressed.
CLICK FOR VIDEO OF ISSUE
This is the button:
OutlineButton(
highlightElevation: 1.0,
onPressed: () => onRequestAllowLocation(context),
child: Text(
"ALLOW LOCATION",
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
),
borderSide: BorderSide(color: MyApp.accentColor, width: 2.0),
textColor: MyApp.accentColor,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(16.0))),
)
And here's the app's theme:
ThemeData(
fontFamily: 'Dosis',
brightness: Brightness.dark,
primarySwatch: Colors.blue,
accentColor: accentColor,
highlightColor: highlightColor,
buttonColor: accentColor,
indicatorColor: accentColor,
backgroundColor: primaryColor,
scaffoldBackgroundColor: primaryColor,
primaryColor: primaryColor,
)
P.S. None of the const colors I provide above are black.
It's the shadow. Stop setting highlightElevation and it will go away. From OutlineButton class docs:
The button's highlightElevation, which defines the size of the drop shadow when the button is pressed, is 0.0 (no shadow) by default. If highlightElevation is given a value greater than 0.0 then the button becomes a cross between RaisedButton and FlatButton: a bordered button whose elevation increases and whose background becomes opaque when the button is pressed.
Related
I want that the FloatingActionButtons, TextButtons and IconButtons will be visually consistent, thus look the same in means of size, shape and color, using a theme in Flutter. how can I achieve that?
For defining a theme, MaterialApp has a property named theme. There you have to provide the instance of ThemeData.
MaterialApp(
title: title,
theme: ThemeData(
brightness: Brightness.light,
)
);
For "FloatingActionButton", "IconButton" and "TextButton" to look like same you have to define the theme (all the properties which you want to be consistent) for all of them such as.
For IconButton
iconTheme: IconThemeData(
color: Colors.red,
),
For FloatingActionButton
floatingActionButtonTheme: FloatingActionButtonThemeData(
foregroundColor: Colors.red,
),
For TextButton
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.red,
),
),
My Suggestion:
Use the primarySwatch property for the consistent color scheme.
primarySwatch: Colors.red;
I've been struggling with attempting to modify the accent colour in FlutterFire UI.
Namely, I'd like to change the blue accent colour here to a different material colour, such as purple. I've messed around with the app theming to no avail, as none of the ThemeData parameters seem to influence this colour so far. I was wondering if this was possible? Thanks!
accent color is deprecated so now u can user Colorscheme instead like this
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.orange,
colorScheme: ColorScheme.fromSwatch(accentColor: Colors.green),
),
home: NextScreen(),
);
You can use this in theme data
theme: ThemeData(
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(
const EdgeInsets.all(24),
),
backgroundColor: MaterialStateProperty.all<Color>(Colors.purple),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
),
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(Colors.purple)
)
)
),
I ended up finding the answer to my own question. Turns out the theming is part of the colour scheme property, and I ended up defining the following:
colorScheme: ColorScheme.fromSwatch().copyWith(
primary: Colors.deepPurpleAccent
)
This set them all to deepPurpleAccent!
This is my theme:
final ThemeData theme = ThemeData();
return MaterialApp(
title: 'Notes',
home: SignInPage(),
debugShowCheckedModeBanner: false,
theme: theme.copyWith(
primaryColor: Colors.green[800],
colorScheme: theme.colorScheme
.copyWith(secondary: Colors.green, secondaryVariant: Colors.green),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.blue[900],
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
);
In the old days of flutter if you'd put in the primary color to green, the border of the focused text fields would turn green too. Now, I want all of my text fields, when in focus, to have a green border, green prefix icon and green label text, all from the root Theme. But this is the result I get with the code above:
I want the lock, the "password" label, and border to be all green when focused, and grey when not focused. How can I do this from the root Theme of the app. I have the primaryColor set up to green and even the colorScheme secondary color set up to green, but still everything is blue, instead of green.
Add this worked for me
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Color.fromRGBO(126, 132, 138, 1),),
),
The actual way now to change the whole text field colors is by changing the colorScheme.
colorScheme: theme.colorScheme.copyWith(
primary: Colors.green,
),
I have a ThemeData defined as follow:
class VendorThemeData {
static ThemeData get themeData {
return ThemeData(
primaryColor: Colors.purple,
accentColor: Colors.orange,
textTheme: ThemeData.light().textTheme.copyWith(
bodyText1: TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
bodyText2: TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
headline6: TextStyle(fontSize: 20),
),
);
}
}
And I will use the static get in my MaterialApp widget:
MaterialApp(
home: ...,
theme: isVendorMode ? VendorThemeData.themeData : ClientThemeData.themeData,
....)
My question is how do I have flutter change the text color based on the surrounding color? For example:
return Scaffold(
appBar: AppBar(
title: Text(
"Menu overview",
style: Theme.of(context).textTheme.headline6,
),
backgroundColor: Colors.blueGrey,
),
I am using the headline6 text theme here for the title text in my appbar, I can't change the text color if I want to use my custom theme, the only way is to declare it white in my ThemeData, but then all my other headline6 will have a white color.
If I want the "Menu Overview" text to have a white color to contrast the background, is it possible for flutter to detect this is automatically change the text color for me?
Can copyWith solve your problem? It can overwrite the property locally.
Theme.of(context).textTheme.headline6.copyWith(color: Colors.white),
When the user select a text from inside a TextField, the default highlight color is blue. How to change it to green for example ?
2021 answer
Wrap with Theme and use copyWith to preserve other theme data.
Theme(data: Theme.of(context).copyWith(
textSelectionTheme: TextSelectionThemeData(
selectionColor: Colors.green)),
child: TextFormField()
)
Wrap your text widget with theme and assign the color to the textSelectionColor property inside ThemeData
refer below code for same:- I have changed the text selection color to green
Theme(
data: ThemeData(textSelectionColor: Colors.green),
child: TextField(
controller: _inputController,
decoration: InputDecoration(hintText: "Input"),
),
),
change the value of textSelectionColor of your ThemeData and it will give you the result you are looking for.
please use this code.
Widget build(BuildContex contex){
return MaterialApp{
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.green,
iconTheme: IconThemeData(
color: kGreenColor,
),
hoverColor: kPrimaryColor,
indicatorColor: kPrimaryColor,
),
}
}