I have declared primary color to Color(0xFF0C9869) to this which is kind of green color but the appbar is always blue until I change it in appbar widget why is my primary color not working. I am running this code in android studio.
main.dart
import 'package:flutter/material.dart';
import 'package:plant/components/home.dart';
import 'package:plant/constraint.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: kBackgroundColor,
textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
),
home: Homescreen(),
);
}
}
constraint.dart
import 'package:flutter/material.dart';
const kPrimaryColor = Color(0xFF0C9869);
const kTextColor = Color(0xFF3C4046);
const kBackgroundColor = Color(0xFF9F8FD);
const double kDefaultPadding = 20.0;
home.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class Homescreen extends StatelessWidget {
const Homescreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(),
);
}
AppBar buildAppBar() {
return AppBar(
elevation: 0,
leading: IconButton(
onPressed: () {},
icon: SvgPicture.asset("assets/icons/menu.svg")
),
);
}
}
you will have to declare it in appBarTheme in ThemeData .
theme: ThemeData(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: kBackgroundColor,
textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
appBarTheme: AppBarTheme(backgroundColor: kPrimaryColor),
),
Related
The app app here loads a tabbed simple app with a scaffold, app bar, and bottomNavigationBar which is set as a TabBar.
When set at the bottomNavigationBar, the TabBar becomes white so I've overridden its background color using a Container widget.
While the rest of my app will change its color palette as expected, however it doesn't for my TabBar. Using Theme.of(context) to get the primary color doesn't work either, as the Theme's color scheme doesn't seem to change at all.
I've attached pictures of the problem too.
theme: ThemeData.light()
theme: ThemeData.dark()
Notice how the whole app except the bottom TabBar reflects these changes happily.
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sereal',
theme: ThemeData(primarySwatch: Colors.indigo),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Container(
color: Theme.of(context).primaryColor,
child: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.calendar_today),
text: 'Planner',
),
Tab(
icon: Icon(Icons.amp_stories),
text: 'Cards',
),
Tab(
icon: Icon(Icons.auto_stories),
text: 'Notes',
),
],
),
),
body: const TabBarView(
children: <Widget>[CardsView(), NotesView(), PlannerView()],
)),
));
}
}
1: make the DefaultTabController in a separate widget.
2: add these properties to the MaterialApp widget:
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
),
themeMode: ThemeMode.light,
3: instead of wraping the TabBar with a Container, wrap it with a Material widget
this is the main file code :
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
),
themeMode: ThemeMode.light,
home: const HomePage(),
);
}
}
this is the homepage code:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Material(
color : Theme.of(context).primaryColor,
child: TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.calendar_today),
text: 'Planner',
),
Tab(
icon: Icon(Icons.amp_stories),
text: 'Cards',
),
Tab(
icon: Icon(Icons.auto_stories),
text: 'Notes',
),
],
),
),
body: const TabBarView(
children: <Widget>[CardsView(), NotesView(),PlannerView()],
)),
);
}
}
.................
this is how it looks when you run the app:
and this is how it looks when you change the themeMode to: ThemeMode.dark
import 'package:flutter/material.dart';
void main() {
runApp(RecipeApp());
}
class RecipeApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
title: 'Recipe Calculator',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
}
This is the current code and above is the current output as per the code, the color remains blue and white instead of grey and black
running on my emulator using your code it works, try restarting your app completely.
import 'package:flutter/material.dart';
void main() {
runApp(RecipeApp());
}
class RecipeApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
title: 'Recipe Calculator',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
}
class MyHomePage extends StatelessWidget {
final title;
const MyHomePage({this.title});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
);
}
}
Try below code hope its helpful to you ,I think you can used Scaffold Widget refer AppBar class here and refer Scaffold class here
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,//change color on your need
title: Text(
'BottomNavigationBar Sample',
),
),
body:Container(),//or your widget
);
Your result screen->
I need to change the flutter theme color, but when I tried then run my app it's show nothing to change. I don't know why.
I have tried this way:
import 'package:flutter/material.dart';
import 'pages/home_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
themeMode: ThemeMode.dark,
theme: ThemeData(primarySwatch: Colors.deepPurple),
darkTheme: ThemeData(
brightness: Brightness.dark, primarySwatch: Colors.deepPurple),
);
}
}
when I change like this way, then still show me default blue color.
flutter version: 2.2.1
Any suggestion please.
with this code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Title",
theme: ThemeData(primarySwatch: Colors.deepPurple),
darkTheme: ThemeData(
brightness: Brightness.dark, primarySwatch: Colors.deepPurple),
home: Test(),
);
}
}
class Test extends StatelessWidget {
const Test({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SomeText"),
),
body: Center(child: Text("Center Text",)),
);
}
}
I get This result. (Flutter 1.22.5)
I have managed to implement a Darkmode into my app, however I don't know how to implement dark mode into other screens, so that when I press a button in settings the whole app goes into dark mode. I know it has something to do with notifying the listeners but I don't know where to begin.
Currently I am using shared preferences to store the dark mode and I have a separate file for the theme.
My Question is effectively how do I implement dark mode into other screens?
Here is my main controller code
import 'themes.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(Darkmode());
class Darkmode extends StatelessWidget {
#override
Widget build(BuildContext context) {
/// Here we are asynchronously passing an instance of SharedPreferences
/// to our Settings ChangeNotifier class and that in turn helps us
/// determine the basic app settings to be applied whenever the app is
/// launched.
return FutureBuilder<SharedPreferences>(
future: SharedPreferences.getInstance(),
builder:
(BuildContext context, AsyncSnapshot<SharedPreferences> snapshot) {
return ChangeNotifierProvider<Settings>.value(
value: Settings(snapshot.data),
child: _Darkmode(),
);
},
);
}
}
class _Darkmode extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: Provider.of<Settings>(context).isDarkMode
? setDarkTheme
: setLightTheme,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: TextStyle(color: Theme.of(context).accentColor),
),
actions: <Widget>[
IconButton(
icon: Icon(Provider.of<Settings>(context).isDarkMode
? Icons.brightness_high
: Icons.brightness_low),
onPressed: () {
changeTheme(
Provider.of<Settings>(context, listen: false).isDarkMode
? false
: true,
context);
},
),
],
),
body: Center(),
);
}
void changeTheme(bool set, BuildContext context) {
///Call setDarkMode method inside our Settings ChangeNotifier class to
///Notify all the listeners of the change.
Provider.of<Settings>(context, listen: false).setDarkMode(set);
}
}
Here is the Shared Preferences file:
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
/// Class that contains all your app settings
/// Consists only of Theme setting as of now
class Settings extends ChangeNotifier {
final SharedPreferences sharedPreferences;
Settings(this.sharedPreferences);
bool get isDarkMode => sharedPreferences?.getBool("isDarkMode") ?? false;
void setDarkMode(bool val) {
sharedPreferences?.setBool("isDarkMode", val);
notifyListeners();
}
}```
Use the ThemeData() to apply the theme to whole app!
bool isDarkMode = Provider.of<Settings>(context).isDarkMode
return MaterialApp(
theme: ThemeData(
primaryColor: isDarkMode ? Colors.blueGrey[900] : Colors.white,
accentColor: isDarkMode ? null : Colors.pink,
scaffoldBackgroundColor: isDarkMode ? Colors.blueGrey[900] : Colors.white,
brightness: isDarkMode ? Brightness.dark : Brightness.light,
backgroundColor: isDarkMode ? Colors.white : Colors.blueGrey[900],
dividerTheme: DividerThemeData(endIndent: 10, indent: 10),
iconTheme: IconThemeData(
color: isDarkMode ? Colors.white : Colors.grey[900]),
textTheme: Theme.of(context)
.textTheme
.apply(
displayColor: model.drakModeState
? Colors.white
: Colors.grey[900],
bodyColor: model.drakModeState
? Colors.white
: Colors.grey[900]),
),
);
This how you can ahieve this.
use Consumer. this widget will let you listen to changes in Settings
pass the new theme to your MaterialApp.
Then combine them.
class _Darkmode extends StatelessWidget {
#override
Widget build(BuildContext context) {
//settingProvider is the current instance of Settings (up to date)
return Consumer<Settings>(builder: (ctx, settingProvider, child)=> MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: settingProvider.isDarkMode
? setDarkTheme
: setLightTheme,
home: MyHomePage(title: 'Flutter Demo Home Page'),
));
}
}
This is some kind of realtime detection. Any time you'll change your theme, this code will update it for the whole app
I've got a little piece of code below. It should show "add icon" with blue color. Instead it shows button with black color (as accentColor in MaterialApp).
Am I doing something wrong in "floatingActionButton"?
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
final appName = "Custom Themes";
return new MaterialApp(
title: appName,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.red[300],
accentColor: Colors.black,
),
home: new MyHomePage(
title: appName
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, #required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: new Text(title),
),
body: new Center(
child: new Container(
color: Theme.of(context).primaryColor,
child: new Text(
"Text with background color",
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.blue),
child: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
)
);
}
}
I watched a tutorial (it is flutter in iOS) and everything works like a charm there.
Tut is from April 2019. Maybe there is something that changed from that time?
You can use
Theme.of(context).copyWith(
colorScheme:
Theme.of(context).colorScheme.copyWith(secondary: Colors.blue),
)
detail reference https://flutter.dev/docs/cookbook/design/themes#complete-example
full code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
final appName = "Custom Themes";
return MaterialApp(
title: appName,
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.red[300],
accentColor: Colors.black,
),
home: MyHomePage(
title: appName
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, #required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Container(
color: Theme.of(context).primaryColor,
child: Text(
"Text with background color",
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: Theme(
data: Theme.of(context).copyWith(
colorScheme:
Theme.of(context).colorScheme.copyWith(secondary: Colors.blue),
),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
)
);
}
}