I want to edit some features of the flappy_search_bar
As you see see the loading spinner is blue and I can't seem to edit this to any alternate color. I also am unable to edit the cursor color which is also blue.
Here is a copy of my current code block:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SearchBar<Post>(
searchBarPadding: EdgeInsets.symmetric(horizontal: 20),
headerPadding: EdgeInsets.symmetric(horizontal: 10),
listPadding: EdgeInsets.symmetric(horizontal: 10),
onSearch: _getALlPosts,
hintStyle: TextStyle(color: Colors.black87),
hintText: 'Search',
iconActiveColor: Colors.deepPurpleAccent,
// cursorColor: Colors.deepPurpleAccent,
// loader: Colors.deepPurpleAccent,
textStyle: TextStyle(
fontFamily: 'OpenSans',
fontSize: 18.0,
),`
So far, I have tried editing directly within the search bar as seen above, adding extension code as follows:
class Styling extends SearchBar {
Styling(this.cursorColor);
final Color cursorColor;
static const accentColor = Colors.deepPurpleAccent;
#override
Widget build(BuildContext context) {
return Theme(
// data: Theme.of(context).copyWith(
// cursorColor: Theme.of(context).accentColor,
// ),
);
}
}
I have also tried editing the package files directly but this hasn't been a success either.
Has anyone suggest how to edit the cursor color and loading spinner color of the flappy_search_bar package?
I've been trying to do this too and managed to get it done.
To edit your cursor, apply the following to your top level MaterialApp under ThemeData :
cursorColor: Colors.red,
cupertinoOverrideTheme: CupertinoThemeData(
primaryColor: Colors.red,
),
This sets the color of the Cursor in ALL TextFields , I don't know how to edit it just for the TextField in the flappy_search_bar widget
For the loading indication, add this under the SearchBar you're using:
SearchBar<SomeClass>(
....
loader: const Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.red))),
....
);
This is what the widget does internally if you look at the source.
Change Colors.red to whatever color you need.
Hope that helps.
Related
I want the icon to change and the boxshadow color to change when GestureDetecotr is pressed. hopefully it will be What should I do?
In the current emulator, press the middle button to change the appearance.
blackMode
lightMode
home.dart part
import 'package:flutter/material.dart';
import 'package:neumorphism/theme/theme_service.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
bool _tapped = false;
var _lightIcon = Icons.wb_sunny;
var _blackIcon = Icons.dark_mode;
return Scaffold(
appBar: AppBar(
title: Text('Neumorphism'),
),
body: Center(
child: GestureDetector(
onTap: () {
ThemeService().changeThemeMode();
},
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(
Radius.circular(40),
),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(5.0, 5.0),
blurRadius: 15.0,
spreadRadius: 1.0),
BoxShadow(
color: Colors.white,
offset: Offset(-5.0, -5.0),
blurRadius: 15.0,
spreadRadius: 1.0),
]),
child: Center(child: Icon(_lightIcon)))),
),
);
}
}
themes.dart
import 'package:flutter/material.dart';
class Themes {
final lightTheme = ThemeData.light().copyWith(
primaryColor: Colors.grey[300],
appBarTheme: AppBarTheme(
brightness: Brightness.light,
),
iconTheme: IconThemeData(color: Colors.white, size: 80),
);
final darkTheme = ThemeData.dark().copyWith(
primaryColor: Colors.grey[800],
appBarTheme: AppBarTheme(
brightness: Brightness.dark,
),
iconTheme: IconThemeData(
color: Colors.black87,
size: 80,
),
);
}
theme_service.dart
theme_service.dart
Hello its easy to do this.
Your main problem is that you need to change the icons when the button is pressed. Right?
Then for this you have to use a Stateful Widget and then wrap the widget into a Value Listenable Builder. After that in onpressed you need to update the notifier.
Let's take a example....
Suppose you have to change the background color of the container when theme changed then do like this..
First create a Instance of value Notifier.
ValueNotifier<bool> _themeNotifier = ValueNotifier<bool>(false);
And then update the notifier in onpressed like this:-
onPressed:(){
_themeNotifier.value = false ; //update the value
}
Note that i have used bool as a datatype of value notifier but you can choose whatever suits your need.
Then Wrap your widget in a ValueListnablebuilder
ValueListenableBuilder(
valueListenable: _themeNotifier,
builder: (context, value, child){
return Container(
decoration:BoxDecoration(color:_themeNotifier.value ? Color.white : Color.black),
child: Container(),
)
},
),
Similar to this in you case you need to change the icon and boxshadow
according to the value of the notifier.
If you need any further explanation or help then you can comment.
and as always
Happy Coding...
you also need to change the brightness of context along with theme mode
Check your theme's brightness to change icon and shadows.
To change the icon, you can use this package. Install the package in your project, import it in your file and then simply replace the child of your container with the below code:
AdvancedIcon(
icon: Icons.wb_sunny,
secondaryIcon: Icons.dark_mode,
state: Theme.of(context).brightness==Brightness.dark ? AdvancedIconState.secondary : AdvancedIconState.primary,
)
Now to change shadow of the container, just replace the boxShadow of your container's decoration with below code:
// replace the shadow with your values.
Theme.of(context).brightness == Brightness.dark ? [BoxShadow(color: Colors.white)] : [BoxShadow(color: Colors.black)]
I don't want to change the text color of the whole app. Just all the text inside a container. Can I wrap it with some other widget or something for this ?
To apply certain TextStyle properties only to a subtree of your app. You can use DefaultTextStyle
DefaultTextStyle(
child: Container(child: /* your subtree */),
style: TextStyle(color: Colors.red),
),
as a comment pointed out, this replaces all defaults, not just the color. This can be mitigated by using the merge constructor:
DefaultTextStyle.merge(
child: Container(child: /* your subtree */),
style: TextStyle(color: Colors.red),
),
flutter's answer is good in my opinion. But the power of ThemeData is more than you think. Here is the official documentation about Themes for part of an application.
You could provide a Theme to wrap your container to provide a new theme. Here is two way to slove it:
1. Creating unique ThemeData
/*Not recommended, this could make a totally different If you just want a little part changed.*/
Theme(
// Create a unique theme with "ThemeData"
data: ThemeData(
textTheme: /* Your Text Theme*/,
),
child: Container(
onPressed: () {},
child: Text("Your Text Here"),
),
);
2. Extending the parent theme
Theme(
// Find and extend the parent theme using "copyWith". See the next
// section for more info on `Theme.of`.
data: Theme.of(context).copyWith(textTheme: /* Provide your theme here! */),
child: Container(
child: Text("your text here"),
),
);
You could also use existed theme with a little changed:
Theme.of(context).textTheme.copyWith(
body1: Theme.of(context).textTheme.body1.copyWith(color: Colors.red),
)
Use DefaultTextStyle.merge to keep your theme and just change the color.
DefaultTextStyle.merge(
style: TextStyle(color: Colors.grey[400]),
child: Column(...),
)
If you are using the MaterialApp widget you could use the theme property of it and set different Text themes and call them anywhere in your app. For example the following code defines 3 different text themes:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Time Tracker",
theme: ThemeData(
textTheme: TextTheme(
headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold,color: Colors.blue),
title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic,color: Colors.red),
body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind',color: Colors.yellow),
),
),
home: LandingPage(),
);
}
}
You can then call a particular theme(headline) anywhere in your app like this:
Text('Home Page',style: Theme.of(context).textTheme.headline,)
Which gives you the headline TextTheme
I have functions for all my styles
TextStyle largeTextStyle() => TextStyle(fontSize: 150);
then I just do
Text("blah", style:largeTextStyle())
I'm very new to flutter but I'm interested in learning it pretty much from the beginning.
Right now I'm trying such a basic thing as changing the background color of some text, but I'm stuck.
import 'package:flutter/material.dart';
void main() {
final barColor = const Color(0xFFD63031);
var app = MaterialApp(
home: Scaffold(
backgroundColor: barColor,
),
);
Center(
child: Text('My Text',
textDirection: TextDirection.ltr,
),
);
runApp(app);
}
I do understand why the text doesn't show but I've been working on this for days now and I have tried a lot of different things without succeeding, so any help would be very appreciated.
Thank You
TL;DR - (Updated 07-08-2019)
Using style property (backgroundColor)
Text(
'Some text...',
style: TextStyle(backgroundColor: Colors.blue),
)
Using style property (background)
Text(
'Some text...',
style: TextStyle(background: Paint()..color = Colors.blue),
)
Using a DecoratedBox
const DecoratedBox(
decoration: const BoxDecoration(color: Colors.blue),
child: const Text('Some text...'),
);
Long answer
First of all, welcome to Flutter and StackOverflow :)
That happens because are misunderstand the way you should develop with Flutter.
As opposed to what happens with other architectures where you start in the main() function, instantiate your vars/objects and develop your flow from there, with Flutter you start your widget tree from your main() function as well, usually with a MaterialApp or CupertinoApp and fit in all its children to create your app.
So, as an example to get what you want, you must add your Center widget as the body of your Scaffold and then give a TextStyle to your Text widget, providing the property color. I gave it blue, but you can give it anything else you want. Thereby, this is your refactored code:
void main() => runApp(
MaterialApp(
home: Scaffold(
backgroundColor: const Color(0xFFD63031),
body: Center(
child: Text(
'MyText',
textDirection: TextDirection.ltr,
style: TextStyle(
background: Paint()..color = Colors.blue,
),
),
),
),
),
);
that will provide the following result
I suggest you take a look at the Awesome Flutter repo where you have a lot of good Flutter content to start with that can really help you out.
Simple you can set it in style property..
Text(
'My Text...',
style: TextStyle(backgroundColor: Colors.grey),
)
You can set this many properties to text in style: TextStyle()
{ bool inherit = true,
Color color,
Color backgroundColor,
double fontSize,
FontWeight fontWeight,
FontStyle fontStyle,
double letterSpacing,
double wordSpacing,
TextBaseline textBaseline,
double height,
Locale locale,
Paint foreground,
Paint background,
List<Shadow> shadows,
List<FontFeature> fontFeatures,
TextDecoration decoration,
Color decorationColor,
TextDecorationStyle decorationStyle,
double decorationThickness,
String debugLabel,
String fontFamily,
List<String> fontFamilyFallback,
String package
}
I have a widget which has two TextFields as descendants. I would like to apply the same styling to these TextFields. My understanding is that the right way to do this is to apply a localized theme to my widget tree. The following is my attempt. This is a code snippet from my root widget's build function. Is there not a cleaner way to do this?
final ThemeData _themeData = Theme.of(context);
return Theme( // HACK
data: _themeData.copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
),
textTheme: _themeData.textTheme.copyWith(
subhead: _themeData.textTheme.subhead.copyWith(
fontSize: 30.0,
),
),
),
child: _buildTheRestOfMyWidgetTree(context),
);
The thing that I am annoyed by is that to override a single property (_themeData.textTheme.subhead.fontSize), I have to explicitly and manually make copies of three intermediate data structures (_themeData, then _themeData.textTheme, then _themeData.textTheme.subhead).
While I can understand the frustration of having to "copy" everything, this is how you should do it.
Data are immutable in Flutter. You cannot mutate them, you are forced to clone them with different properties.
Therefore your assumption is correct: If you want to modify a nested property, you have to clone all of its parents too. Which leads to:
final ThemeData theme = Theme.of(context);
theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
fontSize: 30.0,
),
),
);
Again: you cannot avoid it.
It would help if you packaged that part of the code up and made it a widget so that your tree is cleaner. That's how it's done in this example.
class TextFieldOverride extends StatelessWidget {
const TextFieldOverride({this.child});
final Widget child;
#override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
return Theme(
child: child,
data: themeData.copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder()),
textTheme: themeData.textTheme.copyWith(
subhead: themeData.textTheme.subhead.copyWith(
fontSize: 30.0))));
}
}
...
TextFieldOverride(
child: TextField(...)
)
Or if there are few places the code will be duplicated, you can just make the changes directly:
...
child: TextField(
style: Theme.of(context).textTheme.subhead.copyWith(fontSize: 30.0),
decoration: InputDecoration(border: OutlineInputBorder(),
...
)
)
Or perhaps the best choice is to create a function that does the above for you.
TextField buildTextField(BuildContext context) => TextField(
style: Theme.of(context).textTheme.subhead.copyWith(fontSize: 30.0),
decoration: InputDecoration(border: OutlineInputBorder(),
...
)
)
Is there any way to apply custom theme for ExpansionTile. In my case, I want to have the different background colour for Header and children of the expansion tile but When ever the ExpansionTile is expanded, Headers background color changes to that of children?
To apply a custom Theme to any widget, just wrap it with the Theme() widget.
and then specify your custom theme in the data field of the widget.
Theme(
data: ThemeData(/*specify your custom theme here*/),
child: ExpansionTile() /*or any other widget you want to apply the theme to.*/
)
In your case, to customise the header in ExpansionTile,
when ExpansionTile is closed
the style of header text i.e. title depends on
ThemeData.textTheme.subhead (in flutter 2 it's ThemeData.textTheme.subtitle1)
whereas, the style of the arrow icon depends
on ThemeData.unselectedWidget (in flutter 2 it's ThemeData.unselectedWidgetColor)
when ExpansionTile is open
the color of both the widgets depends on ThemeData.accentColor
In a similar fashion you can customise almost any part of the expansion tile by tweaking the theme. For more details check out this link.
Since flutter is built with flexibility in mind. You can do almost anything you want. Create almost any UI you want.
Following the idea of #user3315892, you can implement your own stateful widget for the ExpansionTile, so that you can control what colours you want the header and children to be when the header is expanded or collapsed.
The following example only changes the text foreground and background colours of the header when the expansion tile is expanded or collapsed, but you can do the same for the children widgets.
class CustomExpansionTile extends StatefulWidget {
#override
State createState() => CustomExpansionTileState();
}
class CustomExpansionTileState extends State<CustomExpansionTile> {
bool isExpanded = false;
#override
Widget build(BuildContext context) {
return ExpansionTile(
title: Container(
child: Text(
"HEADER HERE",
style: TextStyle(
color: isExpanded ? Colors.pink : Colors.teal,
),
),
// Change header (which is a Container widget in this case) background colour here.
color: isExpanded ? Colors.orange : Colors.green,
),
leading: Icon(
Icons.face,
size: 36.0,
),
children: <Widget>[
Text("Child Widget One"),
Text("Child Widget Two"),
],
onExpansionChanged: (bool expanding) => setState(() => this.isExpanded = expanding),
);
}
}
I found another way to do it. I don't know if this is the best way but it's simpler for me.
To change the ExpansionTile color, you can wrap it with a Container and give it a color. This will change the entire color of the ExpansionTile, both collapsed and expanded.
But if you want a different color for the children, you can also wrap them with a Container and set another color there. However, keep in mind that you have to "expand" that Container to occupy all the available space (you can do it by setting width and height parameters properly).
Btw, that doesn't change the arrow color.
Widget expansionTileTest(context) {
return Container(
color: Colors.grey,
child: ExpansionTile(
title: Text(
"Title",
style: TextStyle(color: Colors.black),
),
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.1,
width: MediaQuery.of(context).size.width,
color: Colors.yellow,
child: Center(child: Text("Hi")),
),
],
),
);
}
Collapsed
Expanded
You can set color of header and then body/children wrap in Container and set color to that container.
I used this code to make the trailing ion color Black.
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
backgroundColor: Colors.white,
title: Text(
'Title Exmample',
style: TextStyle(color: Colors.black),
),
leading: CircleAvatar(
backgroundColor: Colors.black.withOpacity(.07),
child: Icon(
Icons.apps_outlined,
color: Theme.of(context).primaryColor,
)),
children: _buildTiles(Theme.of(context).primaryColor, Colors.black.withOpacity(.07), context),
),
);
If you want the ExpansionTile title to remain the same color whether closed or expanded, you can set it's style:
ExpansionTile(
title: Text('HEADER HERE', style: TextStyle(color: Colors.red)),
...
),
Additional styling for ExpansionTile is an open feature request:
Feature request: More styling of ExpansionTile #15427