I have a small Flutter application with Theme configured like this:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
static final list = [
{
'name': 'test',
'password': 'foobar'
}
];
final store = Store(appStateReducers, initialState: AppState(list));
#override
Widget build(BuildContext context) {
return StoreProvider(
store: store,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
appBarTheme: AppBarTheme(
color: Color.fromRGBO(250, 136, 54, 1)
),
textTheme: TextTheme(
body1: TextStyle(
color: Colors.red // text color is red for the whole applicatioin
)
)
),
initialRoute: '/',
routes: {
'/': (context) => NoAccountPageDart(),
'CreateAccount': (context) => CreateAccount(),
'Home': (context) => Home()
},
),
);
}
}
And on one of my screens I have a list of widgets where I want all text widgets to have another color. So I tried to use Theme widget folowing this guide for that like so:
//some code
child: Theme(
data: Theme.of(context).copyWith(
textTheme: Theme.of(context).textTheme.copyWith(
body1: TextStyle(color: Colors.white) // this is the color I want to use
)
),
child: Column(
children: <Widget>[
Text(accounts[index]['name']), // this is supposed to be white. But it's still red.
Text(accounts[index]['password'],
style: TextStyle(color: Colors.green))
],
),
));
//some code
But it didn't work. I have also tried to follow these answers on stackoverflow, and here how it looked in my code:
child: Theme(
data: Theme.of(context).copyWith(
textTheme: Theme.of(context).textTheme.apply(
bodyColor: Colors.white // this is the color I want to use
)
),
child: Column(
children: <Widget>[
Text(accounts[index]['name']), // this is supposed to be white. But it's still red.
Text(accounts[index]['password'],
style: TextStyle(color: Colors.green))
],
),
));
But this didn't work either. What am I doing wrong?
Yes, you can use Theme widget as parent of your Scaffold in which you want to override global theme of app.
For Ex : Your Global theme is
theme: ThemeData(
primarySwatch: Colors.blue,
buttonColor: Colors.red
),
So, you have to use it with the syntax like,
color:Theme.of(context).buttonColor;
By, Adding Theme widget to specific screen like,
Theme(
data: ThemeData(
buttonColor: Colors.purple
),
child: Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: Container(
child: RaisedButton(
onPressed:(){},
child:Text("Save"),
),
),
)
)
For this particular screen your button color gets directly applied from your nearest scaffold ThemeData to the RaisedButton Color. you don't need to reference it using Theme.of(context).
This way you can create a global ThemeData and apply it to all the screens which needs some different theme configurations other than declared in MaterialApp ThemeData.
I hope it helps.
Related
i have a red line when i select color ,i think he can't recognize the chosen color
primarySwatch require a MaterialColor.
ThemeData
See Turn any color to Material Color for flutter
Map<int, Color> color = {
50:Color.fromRGBO(136,14,79, .1),
100:Color.fromRGBO(136,14,79, .2),
200:Color.fromRGBO(136,14,79, .3),
300:Color.fromRGBO(136,14,79, .4),
400:Color.fromRGBO(136,14,79, .5),
500:Color.fromRGBO(136,14,79, .6),
600:Color.fromRGBO(136,14,79, .7),
700:Color.fromRGBO(136,14,79, .8),
800:Color.fromRGBO(136,14,79, .9),
900:Color.fromRGBO(136,14,79, 1),
};
MaterialColor colorCustom = MaterialColor(0xFF880E4F, color);
And
theme: ThemeData(
primarySwatch: colorCustom,
bottomAppBarColor: colorCustom
),
Change the default primary theme color of Flutter widget components to any other custom theme color at once by using ThemeData. The default color of the Flutter app is blue color.
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple
),
)
Full Example
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple
),
home: Home(),
);
}
}
class Home extends StatefulWidget{
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Color Theme"),
),
body: Container(
padding: EdgeInsets.all(20),
alignment: Alignment.center,
child: Column(
children:[
ElevatedButton(
onPressed: (){
},
child: Text("Elevated Button"),
),
ListTile(
leading: Checkbox(
value: true,
onChanged: (value){},
),
title:Text("This is checkbox")
),
ListTile(
leading: Radio(
groupValue: true,
value: true,
onChanged: (value){},
),
title:Text("This is Radio")
)
]
),
)
);
}
}
See here: Flutter Campus
How to define a single style or theme for MaterialButton, FlatButton, RaisedButton widgets everywhere in App.
A style may contain text color, size, font type, corner of circle shape.
child: MaterialButton(
color: Colors.red,
onPressed: () { },
child: Text(
'Proceed',
style: TextStyle(color: Colors.white),
),
You have to create custom widgets for each. you call it that way.
for example flatButton:
class ButtonFlatWidget extends StatelessWidget {
const ButtonFlatWidget(
{Key key, #required this.title, #required this.onPress, this.titleColor})
: super(key: key);
final String title;
final Colors titleColor;
final Function onPress;
#override
Widget build(BuildContext context) {
return FlatButton(
child: Text(
title,
style: TextStyle(color: titleColor ?? Colors.blueAccent, fontSize: 16),
),
onPressed: onPress,
);
}
}
then you use the ButtonFlatWidget widget wherever you want.
but I just want to add text color and style. if you say You have to write different methods for each and call them. this is a tough event.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
buttonTheme: ButtonThemeData(
height:60
buttonColor: Colors.blueAccent,
shape: RoundedRectangleBorder(),
textTheme: ButtonTextTheme.accent,
....
),
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
ButtonThemeData.buttonColor: Same as ThemeData.
ButtonThemeData.splashColor: Same as ThemeData used in FlatButton, OutlineButton or RaisedButton.
ButtonThemeData.highlightColor: Same as ThemeData.
ButtonThemeData.hoverColor: Same as ThemeData.
ButtonThemeData.minWidth: Default minimum width.
ButtonThemeData.height: Default height.
ButtonThemeData. padding: Default padding.
ButtonThemeData.shape: Default shape.
are some of the common options..
I've created a simple login UI in flutter, but I don't know how to make the overall theme of the app as dark. What I mean is that in the future, if I add more functionality to the app, it should all be in the dark theme. Is there any way to do that?
I've used a separate dart file (login.dart) and all the widgets used in my login UI are in this file. I've set the ThemeData as dark in the main dart file (main.dart), but the app is still running in light theme.
Here's my code:
main.dart
import 'package:flutter/material.dart';
import 'package:bidder_login/login.dart';
void main(){
runApp(
MaterialApp(
theme: ThemeData(),
darkTheme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
title: "Basic Login Demo",
home: LoginPage(),
),
);
}
login.dart
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 24.0),
children: <Widget>[
SizedBox(height: 80.0),
// Column(
// children: <Widget>[
// Image.asset('assets/login_app.png'),
// SizedBox(height: 25.0),
// Text("Material Login"),
// ],
// ),
//*Username starts here
SizedBox(height: 120.0),
TextField(
decoration: InputDecoration(
labelText: 'Username',
filled: true,
),
),
//*Password starts here
SizedBox(height: 12.0),
TextField(
decoration: InputDecoration(
labelText: 'Password',
filled: true,
),
obscureText: true,
),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
},
),
RaisedButton(
child: Text('Next'),
onPressed: () {
},
)
],
)
],
),
),
);
}
}
You need to use ThemeMode
Describes which theme will be used by MaterialApp.
SAMPLE CODE
themeMode: ThemeMode.dark,//Always use the dark mode (if available) regardless of system preference.
themeMode: ThemeMode.light,//Always use the light mode regardless of system preference.
themeMode: ThemeMode.system,//Use either the light or dark theme based on what the user has selected in the system settings.
themeMode: ThemeMode.values,//A constant List of the values in this enum, in order of their declaration.
How To use ThemeMode in MaterialApp
MaterialApp(
debugShowCheckedModeBanner: false,
theme:
ThemeData(primarySwatch: Colors.blue, brightness: Brightness.light),
themeMode: ThemeMode.dark,
darkTheme: ThemeData(brightness: Brightness.dark),
home: SafeArea(
child:Scaffold(
) ),
);
The recommended method is to use ColorScheme.
var mode = ThemeMode.light; // or ThemeMode.dark
MaterialApp(
theme: ThemeData.from(colorScheme: ColorScheme.light()),
darkTheme: ThemeData.from(colorScheme: ColorScheme.dark()),
themeMode: mode,
home: //...
)
I want a global BottomAppBar which I want to define in my MaterialApp.
My current MaterialApp:
return MaterialApp(
initialRoute: '/overview',
routes: {
'/overview': (context) => OverViewPage(),
'/summary': (context) => SummaryPage(),
'/record': (context) => RecordPage(""),
'/calendar': (context) => Calendar(),
'/piechart': (context) => PieChartPage()
},
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: lightTheme,
home: OverViewPage(),
);
In every Route is a own Scaffold because I need to specify my AppBar actions and the FloatingActionButton individually for each page. But when I wrap the home in a Scaffold and make the body of the Scaffold to each page, I have two Scaffolds stacked in each other, which is not possible.
So basically I need an BottomAppBar in my Material App, but need to override the AppBar and the FloatingActionButton in each page.
You have to have a common screen that has BottomAppBar and doesn't declare its child pages into routes, then you can declare Appbar on each of child page.
For ex,
class BottomNavigation extends StatelessWidget{
// add child pages in _widgetOptions
static List<Widget> _widgetOptions = <Widget>[
FeedTab(),
ChatTab(),
Marketplace(),
Profile(),
];
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Scaffold(
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
showUnselectedLabels: true,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.menu),
title: Text(
'Feed',
style: tabTextStyle,
),
),
BottomNavigationBarItem(
icon: Icon(Icons.forum),
title: Text('Chat', style: tabTextStyle),
),
BottomNavigationBarItem(
icon: Icon(Icons.explore),
title: Text('Market Place', style: tabTextStyle),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('My Profile', style: tabTextStyle),
),
],
// type: BottomNavigationBarType.fixed,
currentIndex: _selectedIndex,
unselectedItemColor: AppColors.colorHint,
selectedItemColor: AppColors.themeColor,
onTap: _onItemTapped,
),
),
),
if (!isConnectedToInternet)
_showInternetStatus('No Internet Connection', AppColors.colorRed),
// if (isConnectedToInternet && isConnectionWidgetVisible)
// _showInternetStatus('Connected to Internet', AppColors.colorGreen)
],
);
}
}
Then you can have Appbar on each page like this,
class FeedTab extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.person_pin),
onPressed: () {
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text("My Followers Post")));
},
),
.......
I have a normal ListView which is wrapped by the Scrollbar class to produce a scrollbar when scrolling down. But I want to change the Scrollbar color to white since I have a dark background.
After exploring the Scrollbar class I can see that it uses the theme highlightColor as shown inside scrollbar.dart.
_themeColor = theme.highlightColor.withOpacity(1.0);
Tried wrapping the Scrollbar in a Theme but still no luck.
Below is my code -
Theme(
data: ThemeData(
highlightColor: Colors.white, //Does not work
),
child: Scrollbar(
child: ListView(
//Normal ListView code
),
),
)
Any help is appreciated. Thanks in advance.
You can use RawScrollbar instead and set the thumbColor to whatever color you like.
child: RawScrollbar(
thumbColor: Colors.redAccent,
radius: Radius.circular(20),
thickness: 5,
child: //scrollable widget
)
I changed it like this.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light().copyWith(
scrollbarTheme: ScrollbarThemeData().copyWith(
thumbColor: MaterialStateProperty.all(Colors.grey[500]),
)
),
);
}
}
Scroll bar uses the highlight color.. so just add ur desired scrollbar color in the highlightColor inside Theme in MaterialApp and you are done.
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
//main color
primaryColor: const Color(0xffFFC600),
//main font
fontFamily: 'Roboto-Medium',
//swatch stretching
primarySwatch: goldenThemeColor,
visualDensity: VisualDensity.adaptivePlatformDensity,
splashColor: const Color(0xffFFC600),
//color for scrollbar
highlightColor: Color(0xffffc600)
),
routes: {
'/' : (context) => SplashScreen(),
...
}
initialRoute: '/',
)
Flutter now provides scrollbarTheme you can use it to set global scroll bar theme and change the thumbColor property as shown below
ScrollbarThemeData(
interactive: true,
isAlwaysShown: true,
radius: const Radius.circular(10.0),
thumbColor: MaterialStateProperty.all(
DarkAppColors.primaryTextColor.withOpacity(0.4)),
thickness: MaterialStateProperty.all(5.0),
minThumbLength: 100,
),
you could clone the file you linked and change the color inside your project, and then instead of using Scrollbar() use, for example, MyScrollBar(), the edited file you cloned