I want to remove the shadow from the search bar when using SearchDelegate but I can't find how to. Any tips?
This is basically all the code:
showSearch(
context: context,
delegate: CustomSearchDelegate(),
);
CustomSearchDelegate() just contains an empty search delegate widget/class.
#override
ThemeData appBarTheme(BuildContext context) {
return super.appBarTheme(context).copyWith(
appBarTheme: super.appBarTheme(context).appBarTheme.copyWith(
elevation: 0.0,
),
);
}
Add this inside the Searchdelegate class:
#override
ThemeData appBarTheme(BuildContext context){
assert(context != null);
final ThemeData theme = Theme.of(context);
assert(theme != null);
return theme.copyWith(
primaryColor: Colors.grey[50],
);
}
and this to the main app theme:
MaterialApp(
theme: ThemeData(
backgroundColor: Colors.white,
appBarTheme: AppBarTheme(elevation: 0.0), //This is important
title: 'Flutter Demo',
home: MyHomePage(),
);
Make changes accordingly in your ThemeData() and add the appBarTheme: AppBarTheme(elevation: 0.0), to remove the elevation and the SearchDelegate theme as it is your search delegate class which will ensure that the elevation defined in the ThemeData of your material app is implemented.
Note: I guess, that the elevation set in the ThemeData will affect the elevation of the appbar in other pages all over the app too.
Result:
Output image
Related
I want to check if my Darkmode is enable or not so I did this:
#override
Widget build(BuildContext context) {
var brightness = MediaQuery.of(context).platformBrightness;
bool isDarkMode = brightness == Brightness.dark;
print(isDarkMode);
in the first widget which builds after the MaterialApp, but I always get false as print result, independently of the active Theme Mode. I also tried
var brightness = SchedulerBinding.instance.platformDispatcher.platformBrightness;
bool isDarkMode = brightness == Brightness.dark;
In the init state, but same problem
I checked if it's the fault of my project, so I created a brand-new Project and used the adaptive_theme package - still same problem
Code of the Material:
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return AdaptiveTheme(
light: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.yellow,
backgroundColor: Colors.grey
),
dark: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.red,
backgroundColor: Colors.blue,
),
builder: (theme, darkTheme)=>MaterialApp(
title: 'Flutter Demo',
theme: theme,
darkTheme: darkTheme,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
), initial: AdaptiveThemeMode.light,
);
}
}
I call MediaQuery.of(context).platformBrightness inside the MyHomePageState.
Any advices what I do wrong?
First make sure that you have added both ThemeModes in Material App itself:
Here's the example:
return MaterialApp(
title: "Dark",
debugShowCheckedModeBanner: false,
theme: ThemeData.copywith(brightness: Brightness.light),
darkTheme: ThemeData.copywith(brightness: Brightness.dark),
themeMode: ThemeMode.light,
);
Simpel answere to my question after a lot of research: In the current version ( 16.01.2022) MediaQuery.of(context).platformBrightness; is not the correct way to check if darkmode inside your app is enabled or not. This only works for checking which Theme the user uses on his system.
For checking on app level just use:
bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
print(isDarkMode);
and it prints the correct value of the bool.
Let me know if you have a different information.
I am using flutter 2.8.0 to create a simple app.
But when I am trying to change the primary color for the App it does not work with me.
This is the code I am working on:
class BMICalculator extends StatelessWidget {
const BMICalculator({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
primaryColor: const Color(0xFF0A0E21),
scaffoldBackgroundColor: const Color(0xFF0A0E21),
),
home: const InputPage(),
);
}
}
#Mrinal already mentioned you to use primarySwatch. Flutter team intended to build clean up the Theme system and make everything more consistent and based off of the ColorScheme colors. They recommend using color scheme instead of primary color
theme: ThemeData(
primaryColor: ColorsX.primary,
colorScheme: ColorScheme.light().copyWith(primary: ColorsX.primary),
);
For dark theme
theme: ThemeData.dark().copyWith(
colorScheme: ColorScheme.light().copyWith(primary: Colors.tealAccent),
),
output:
For more read this article article
Use primarySwatch
theme: ThemeData(
primarySwatch: Colors.red,
),
I found a solution for me..
MaterialColor _primartSwatch = Colors.purple;
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
themeMode: _themeMode,
theme: ThemeData(
primarySwatch: _primartSwatch,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: _primartSwatch,
),
home: SplashScreen(),
);
}
I am trying to make the bottom navigation bar white, with dark icons (Versus the default of black background with white buttons.
I am using this code in main.dart, where I us the SystemChrome method to set the background color and icon color. This looks great when I first open up the app.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
// this sets bottom bar to white
var mySystemTheme= SystemUiOverlayStyle.light.copyWith(systemNavigationBarColor: Colors.white,systemNavigationBarIconBrightness: Brightness.dark);
SystemChrome.setSystemUIOverlayStyle(mySystemTheme);
return ChangeNotifierProvider(
create: (ctx) => GBUserInfo(),
child: MaterialApp(
title: 'test',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
backgroundColor: Colors.pink,
accentColor: Colors.yellow,
accentColorBrightness: Brightness.dark,
buttonTheme: ButtonTheme.of(context).copyWith(
buttonColor: Colors.blue,
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
home: StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (ctx, userSnapshot) {
if (userSnapshot.connectionState == ConnectionState.waiting) {
return SplashScreen();
}
if (userSnapshot.hasData) {
return ZonesScreen();
}
return Login();
}),
routes: {},
),
);
}
}
Here it looks like I want when I open app.
But, if I minimize app, then click to bring to foreground again,
The buttons are gone, I'm assuming they defaulted back to white.
How do I set the navigation color/icon colors and have them stick with the app?
Try adding a theme data of your desired choice and also make that theme permanent by passing that theme like Themedata.dark() or ThemeData.light()
MaterialApp(
themeMode: ThemeMode.dark,
home: CounterCoin(),
theme: ThemeData.light().copyWith(
)
Like in the above example.
You can then change that theme using theme mode which has the following enums
ThemeMode.system , ThemeMode.dark , ThemeMode.light and use copy with to alter individual property u don't need system callbacks for changing theme this is a more easy and readable way .
I am new to Flutter and did not get the difference. What is the difference between providing a color through
primaryColor like theme: ThemeData(primaryColor: Colors.red)
AND
colorScheme like theme: ThemeData(colorScheme: ThemeData().colorScheme.copyWith(primary: Color.red))
So assuming this, If I set both primaryColor and colorScheme.primary to different colors, What change in UI we will get. Please check the example below:
Widget build(BuildContext context) {
final ColorScheme colorScheme = ColorScheme(
primary: Color(0xFFFFFFFF), // <---- I set white color here
primaryVariant: Color(0xFF117378),
secondary: Color(0xFFEFF3F3),
secondaryVariant: Color(0xFFFAFBFB),
background: Color(0xFF636363),
surface: Color(0xFF808080),
onBackground: Colors.white,
error: _lightFillColor,
onError: _lightFillColor,
onPrimary: _lightFillColor,
onSecondary: Color(0xFF322942),
onSurface: Color(0xFF241E30),
brightness: Brightness.light,
);
return Theme(
data: Theme(
primaryColor: Colors.red, // <----- I set color to red
colorScheme: colorScheme // <----- colorScheme.primary is white
),
child: child
);
}
}
ANSWER 2.0
After a bit of a research, I want to tell you that, Flutter is now moving toward using ColorScheme() extensively, and not primaryColor from ThemeData()
Now coming to the point, first let us understand what these two are in our ThemeData
primaryColor is responsible of setting the theme and background color of the app thorughout
colorScheme, on the other hand is a set of twelve colors based on the Material spec that can be used to configure the color properties of most components.
WHY PRIMARY, NOT COLORSCHEME: This is because, if you want to use colorscheme, then you need to define all the predefined elements inside the ColorScheme class, which is not feasible in current case.
Also, primaryColor always is priority responsible for the theme of the app.
ColorScheme can be used to assign color to the widget like cards, materialbuttons etc, without even effecting the current theme of the app, with the usage of Theme.of(context).colorScheme.primary
Let us take a look at the example:
class MyApp extends StatelessWidget {
final ColorScheme colorScheme = ColorScheme(
primary: Color(0xFFFFFFFF), // <---- I set white color here
primaryVariant: Color(0xFF117378),
secondary: Color(0xFFEFF3F3),
secondaryVariant: Color(0xFFFAFBFB),
background: Color(0xFF636363),
surface: Color(0xFF808080),
onBackground: Colors.white,
error: Colors.redAccent,
onError: Colors.redAccent,
onPrimary: Colors.redAccent,
onSecondary: Color(0xFF322942),
onSurface: Color(0xFF241E30),
brightness: Brightness.light,
);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.red,
colorScheme: colorScheme
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
USING PRIMARY COLOR AND COLORSCHEME IN MYHOMEPAGE
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container()
)
);
}
}
So, if you closely, see this, the primaryColor is not mentioned in the MYHOMEPAGE, it will inherit it's parent primaryColor, not colorScheme.
Now, to note that, colorScheme can be used explicitly to define the color of a widget.
Also, colorScheme.copyWith() will do nothing but make changes to the color property inside the currently existing color, without effecting the global colorScheme color property, for instance primary.
Let us see the usage, if we want to use colorScheme in our theme
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.primary, // <-- Setting the color of the appbar explicitely using colorScheme
title: Text(widget.title),
),
body: Center(
child: Container()
)
);
}
}
Now we get this result, that the background becomes white now
Gist
Theme primaryColor and other color property will always be preferred over colorScheme.
To use colorScheme, first you need to define your custom colorScheme in your main.dart file, and then make use by using in another instances for setting background etc.
In order to get more details, please read from these documentations:
ColorScheme Class
colorScheme property
Material Design
ThemeData Class
I want to display dark or light mode based on the settings of the device.
I need to get the brightness of the device when building my ThemeData, something like this:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final materialLightTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.light,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.light),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.light)
),
);
final materialDarkTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.dark,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.dark),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.dark)
),
);
Brightness brightness = MediaQuery.of(context).platformBrightness;
return MaterialApp(
themeMode: brightness == Brightness.light
? ThemeMode.light
: ThemeMode.dark,
theme: materialLightTheme,
darkTheme: materialDarkTheme,
home: MyHomePage(),
);
}
}
But it seems, MediaQuery is not available in the build Method outside of an Material App. I get the Error
MediaQuery.of() called with a context that does not contain a
MediaQuery.
How can I achieve this behaviour?
First for your use case, if you just want to apply dark and light theme based on system's dark mode, then it is automatically handled by the Flutter, just by providing the darkTheme property in your MaterialApp widget, whenever the system's dark mode is activated, the theme supplied in the darkTheme parameter will automatically activate.
However if you do want to access MediaQuery before you apply themes and other stuff to your app via MaterialApp, from what I know you need either MaterialApp or WidgetsApp before in the widget tree in order to get the MediaQuery.of(context). However, we can workaround that by using, two MaterialApp widgets one for just getting the MediaQuery in the second you apply the theming and all other stuff as below
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final materialLightTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.light,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.light),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.light)
),
);
final materialDarkTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.dark,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.dark),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.dark)
),
);
Brightness brightness = MediaQuery.of(context).platformBrightness;
return MaterialApp(
themeMode: brightness == Brightness.light
? ThemeMode.light
: ThemeMode.dark,
theme: materialLightTheme,
darkTheme: materialDarkTheme,
home: MyHomePage(),
);
}
}