I wanted to apply dark mode on buttons. It is applied on texts, now I am trying to apply it on button. I am unable to figure out what button I should use that would take the primary colour from the MyThemes class. Kindly help me through this.
ThemeProvider:
class MyThemes {
static final darkTheme = ThemeData(
primaryColor: Colors.black,
buttonTheme: const ButtonThemeData(
buttonColor: Colors.orange,
textTheme: ButtonTextTheme.primary,
),
colorScheme: const ColorScheme.dark(),
iconTheme: IconThemeData(color: Colors.purple.shade200, opacity: 0.8),
);
static final lightTheme = ThemeData(
primaryColor: Colors.white,
colorScheme: const ColorScheme.light(),
iconTheme: const IconThemeData(color: Colors.black, opacity: 0.8),
buttonTheme: const ButtonThemeData(
buttonColor: Colors.orange,
textTheme: ButtonTextTheme.primary,
),
);
}
How can I style the button in homepage? What button would refer the primary colour from the MyThemes class?
HomeScreen:
Padding(
padding: const EdgeInsets.only(
top: 10.0, right: 20, left: 20),
child: InkWell(
onTap: () {
},
child: Container(
width: 250,
decoration: const BoxDecoration(
//color: Colors.orange,
borderRadius:
BorderRadius.all(Radius.circular(27)),
),
//height: 300,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
MaterialButton(
onPressed: null,
child: Row(
children: const [
SizedBox(
width: 55,
),
Text(
'Upgrade to PRO',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
],
)),
),
),
To get the primary color use
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
MaterialButton using directly ThemeData. Also This class is obsolete..
A utility class for building Material buttons that depend on the ambient ButtonTheme and Theme.
If you like to override the default color you can directly provide color on themeData.
static final darkTheme = ThemeData(
primaryColor: Colors.black,
splashColor: Colors.pink,
hoverColor: Colors.yellow,
Image on while tapping on dark mode
Related
I am using DefaultTabController widget in Flutter and the output is as below :
I want to remove left and right white background portion as you can see it in above image.
How can I remove that portion or can change the color to dark ?
So far I am trying it as below :
return ThemeData(
tabBarTheme: const TabBarTheme(
),
);
Now, here I am not able to find property that changes the white color to dark color. Please guide. Thanks.
Code :
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
appBar: AppBar(
titleSpacing: 24.w,
centerTitle: false,
title: Text(
Localization.of(context).labelFacilities,
style: TextStyle(
fontWeight: FontWeight.w600,
color: getBool(isDarkMode) ? whiteColor : textColorBlack,
fontSize: 20.sp),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 28.w),
child: Image.asset(icSearch,
width: 18.w,
height: 18.h,
color: getBool(isDarkMode) ? whiteColor : textColorBlack),
)
],
backgroundColor: Theme.of(context).backgroundColor,
elevation: 0,
bottom: PreferredSize(
preferredSize: _tabBar.preferredSize,
child: Material(
borderRadius: BorderRadius.circular(10.w), //<-- SEE HERE
child: Container(
child: _tabBar,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: lightYellowColor,
borderRadius: BorderRadius.circular(10.w)),
margin: EdgeInsets.symmetric(horizontal: 24.w),
),
),
),
),
body: Container(
margin: EdgeInsets.only(top: 24.h, right: 24.w, left: 24.w),
child: TabBarView(
children: [
AttractionsScreen(),
EventsScreen(),
UtilitiesScreen(),
],
),
),
));
Tabbar widget is created as below :
TabBar get _tabBar => TabBar(
labelPadding: EdgeInsets.zero,
indicatorWeight: 1,
padding: EdgeInsets.zero,
indicatorPadding: EdgeInsets.zero,
labelStyle: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14.h,
fontFamily: 'Poppins',
),
//For Selected tab
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14.h,
fontFamily: 'Poppins',
),
labelColor: Colors.white,
unselectedLabelColor: textColorBlack,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(10.w), color: yellowColor),
tabs: [
Tab(
child: Align(
alignment: Alignment.center,
child: Text(Localization.of(context).labelAttractions),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text(Localization.of(context).labelEvents),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text(Localization.of(context).labelUtilities),
),
),
]);
You can find some padding properties on TabBar and set it zero.
TabBar(
padding: EdgeInsets.zero,
labelPadding: EdgeInsets.zero,
indicatorPadding: EdgeInsets.zero,
tabs: [....],
),
#1 You can add color in
Material(
color: "YOUR_COLOR",
)
#2 Remove that portion
Code:
PreferredSize(
preferredSize: _tabBar.preferredSize,
child: Material(
color: lightYellowColor, // <-- Change color HERE
borderRadius: BorderRadius.circular(10.w), //<-- SEE HERE
child: Container(
child: _tabBar,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: lightYellowColor,
borderRadius: BorderRadius.circular(10.w)),
margin: EdgeInsets.symmetric(horizontal: 24.w), //<--Remove that portion
),
),
),
I design my own and trying to use this design too
so it's can be like my design??
but i don't understand how to put this button to appbar[action] cuz when i fill that button take full height
my code here i write by use it as Widget ,then i call for use at appbar
AppBar _profileAppbar(
context,
) {
return AppBar(
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"state.username",
style: TextStyle(
color: Colors.black, fontSize: 24, fontFamily: 'SukumvitSetBold'),
),
],
),
actions: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: HexColor("7225FF"),
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(18.0),
),
child: Text(
"Edit",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
height: 5,
width: 5,
),
],
iconTheme: IconThemeData(
color: Colors.black,
),
// leading: Icon(Icons.menu),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
);
}
One Idea is to make eveything custom without using AppBar().
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
const SizedBox(width: 10),
Icon(Icons.message, color: Colors.black),
const SizedBox(width: 10),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
),
child: Text('Edit', style: TextStyle(color: Colors.white))
),
],
),
height: kToolbarHeight,
decoration: const BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
offset: Offset(0.0, 2),
blurRadius: 14,
spreadRadius: 2,
)
]),
),
));
}
}
How can I design like this in flutter?
The above image u can use as star.
I have tried like the following but it's not correct,
new Container(
child:
ButtonTheme (
buttonColor: buttonColor: Colors.teal,
child: Stack(
children: [
RaisedButton (
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(
color: Colors.transparent,
),
),
child: Text(
'123',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontFamily: 'MuseoSans',
),
),
onPressed: () {
//click actions
},
),
Positioned( // will be positioned in the top right of the container
top: 0,
left: 0,
child: new Image.asset('images/ic_star.png'),
)
]
)
),
)
Try this
Container(
child: ButtonTheme(
buttonColor: Colors.teal,
child: Stack(children: [
Container(
height: 40.0,
child: Padding(
padding: const EdgeInsets.only(left: 25.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(
color: Colors.transparent,
),
),
child: Text(
'123',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontFamily: 'MuseoSans',
),
),
onPressed: () {
//click actions
},
),
),
),
Positioned(
// will be positioned in the top right of the container
top: 0,
left: 0,
child: new Image.asset(
'images/ic_star.png',
width: 50.0,
height: 50.0,
),
)
])),
)
It will look something like this -
Use 'Stack' widget
Here is pseudo code
It very bad code but simple example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: 90,
height: 23,
child: Stack(
children: [
Align(
alignment: Alignment.centerRight,
child: Container(
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
' 123123',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),
Image.network('https://i.stack.imgur.com/SpWmJ.png', height: 23),
],
),
),
);
}
}
You have to change some size (like wrap content)
I need to change the brightness for the Container inside Scaffold, the snippet of code looks like below.
Any hints or suggestions are more than welcome!
PS: I checked document , but the example of changing brightness is for MaterialApp not for Container inside Scaffold.
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Brightness.light,
title: Text(
"My Card brightness",
style: TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
),
body: SingleChildScrollView(
child: Column(children: <Widget>[
Card(
color: Color.fromARGB(255, 247, 247, 247),
margin: const EdgeInsets.fromLTRB(10, 10, 10, 40),
child: Column(
children: <Widget>[
// logo
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
//height: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color.fromARGB(255, 0, 0, 0),
shape: BoxShape.rectangle,
),
// i need increase brightness here
child: Container(
width: 90,
child: Image.network(
'${widget.logo}',
fit: BoxFit.fitWidth,
)),
)),
],
),
I think changing the brightness of the Scaffold only, at this moment is still not possible. But, you can add the color to your Scaffold and add the opacity to it:
Example:
Scaffold(
backgroundColor: Colors.white.withOpacity(0.8),
appBar: AppBar(
title: Text(
"My Card",
style: TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
),
body: null,
);
NOTE: Opacity's value range between 0.0 - 1.0
You can set the backgroundColor parameter for Scaffold to a different color of your choice.
https://api.flutter.dev/flutter/material/Scaffold/backgroundColor.html
Scaffold(
backgroundColor: Colors.white,
)
Flutter widget, I tried to change the OutlineButton border color by using BorderSide(color : Colors.blue). The OutlineButton always with grey color border no matter which color is set, but width change is applicable. How to change the OutlineButton border line color?
class OutlineButtonWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: OutlineButton(
onPressed: null,
borderSide: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
child: Text('outline button')
),
),
);
}
}
Use thestyle property:
OutlinedButton(
onPressed: () {},
child: Text('Outlined button'),
style: OutlinedButton.styleFrom(
side: BorderSide(width: 5.0, color: Colors.blue),
),
)
use style property
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid)))
or try this both work
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
)
OutlinedButton(
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid))),
onPressed: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12.0),
child: Icon(
Icons.clear,
size: 24,
),
),
),
Text("Clear")
],
))
result may like this
Style property will work
OutlineButton(
onPressed: (){},
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
),
),
I was getting 'OutlineButton' is deprecated and shouldn't be used. Use OutlinedButton instead. See
the migration guide in flutter.dev/go/material-button-migration-guide).
Before migration code:
child: OutlineButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
color: Colors.orange,
borderSide: BorderSide(color: Colors.amber),
),
After migration code:
child: OutlinedButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
style: OutlinedButton.styleFrom(backgroundColor: Colors.orange, side: BorderSide(color: Colors.amber)),
),
Here is official ref of backgroundColor and color properties:
https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html
https://api.flutter.dev/flutter/material/MaterialButton/color.html
Theming
I wanted to avoid manually theming each OutlinedButton, and use theming instead.
You can do this with ThemeData's outlinedButtonTheme:
final color = ...;
ThemeData(
...
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
side: MaterialStateProperty.all(const BorderSide(color: color)),
// surfaceTintColor: MaterialStateProperty.all(Colors.blue),
)),
);