Starting mui5, I noticed that the drawer in dark mode has become semi transparent. How to change the opacity of the drawer (not the backdrop).
<SwipeableDrawer
open={props.drawerOpened}
onClose={props.toggleDrawer(false)}
onOpen={props.toggleDrawer(true)}
PaperProps={{
sx: {
opacity: 1,
}
}}
>
The opacity: 1 above did not work.
Related
I make sleep data chart that has touchable bar charts. This is made by using touchable custom painter.
Here is sample code, image. Tooltip that has sleep amount message is shown when you long pressed the bar.
So, I want to add effect that change bar color when I tap down the bar.
But I don't know how to make this effect.
I tried to add some code in component/chart_painter.dart but this can't change color.
//~~~ line 90
touchyCanvas.drawRRect(rect, paint,
onLongPressStart: (_) => showTooltipCallback(
context: context,
amount: dataAmount[index],
left: left,
top: top,
),
// like this
onTapDown: (_) {
canvas.drawRRect(rect, paint);
}
);
//~~~
Good evening guys.
I have a problem. I've been on flutter for quite some time. Here I have two AScreen and BScreen screens. For AScreen I would like a white color status bar with black icons. And for BScreen a red status bar with the icons in white. How to achieve this ??
I use flutter_statusbarcolo when I am on screen A the status bar is red I navigate to screen B the status bar is white but when I return to screen A the status bar keeps the color white (color of the screen B)
Since you want to change this on per-screen basis, do this on your appBar off the your screen's Scaffold.
Use
appBar: AppBar(
backgroundColor: Colors.red, // status bar color
brightness: Brightness.light, // status bar brightness
)
AnnotatedRegion<SystemUiOverlayStyle>(value: SystemUiOverlayStyle(statusBarColor:Colors.white,),child: Scaffold(),)
Applies its effect only for the widget that you wrap.
I'm using AnimatedOpacity to hide some widgets in Stack between various states in my app.
For instance I have Stack with ListView and animating loading indicator (shimmer) below, so that when list is populated the animated background opacity is gradually set to 0.
Stack:
- AnimatedOpacity (
opacity: _populated ? 0.0 : 1.0,
child: AnimatedLoadingWidget,
),
- ListView
Do I understand correctly that the animation in AnimatedLoadingWidget continues and is rendered even if opacity is set to 0.0? Does it have a performance impact on the app?
If you're wondering whether or not the widget is still rendered when an opacity of 0, then no.
Opacity and its animated variant is clever enough to not render the child if the opacity is strictly equal to 0.
But that's not enough. Even with an opacity of 0, your loading widget is still in the widget tree, and its animation continues to play.
To be more specific, with typical:
Opacity(
opacity: 0,
child: const CircularProgressIndicator(),
)
the spinner will not be visible, but it will still endlessly request new frames.
To fix that, we can use TickerMode widget like so:
Opacity(
opacity: 0,
child: TickerMode(
enabled: false,
child: const CircularProgressIndicator(),
),
)
Doing so will "mute" animations played using the animation framework, and as such, the spinner will stop requesting for new frames.
Alternatively, you can use AnimatedCrossFade with a custom layoutBuilder to achieve a similar effect.
I'm trying to integrate material-ui to my project and I have some issues with custom theme settings
I created a custom theme this way
App.js
const theme = createMuiTheme({
palette: {
primary: green,
secondary: red,
},
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
...}}
Then in a component in the substructure I create some specific css.
Now my issue is that I'm obliged to define style appBar with a backgroud color and apply it explicitely on the AppBar component. If I don't do one of these two operations, the bg of the appBar remains light gray
What is weired is that I get the correct green from theme.palette.primary["500"], which means the theme is correctly configured
Header.js
const styles = theme => ({
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
appBar: {
backgroundColor: theme.palette.primary["500"]
},//...)}
class Header extends Component {
constructor(props) {
super(props)
this.classes = props.classes
}
render() {
return (<I18n>
{(tsl, {i18n, t, ready}) => {
return (
<div className={this.classes.root}>
<AppBar position="static" color="default" className={this.classes.appBar}>
<Toolbar>...(irrelevant code)
I followed the examples in https://material-ui.com/demos/app-bar/ where the first example has the light gray color, then all the other examples have a blue bg, but there's nothing in the source code that was added to apply the blue color (in my opinion)
Any help please? thanks folks
Use <AppBar position="static" color="primary">.
By default AppBar is using the colors from the grey palette.
We are considering defaulting to primary for the color prop since it's not following the spec and having grey as a default for something as prominent as the app bar is a bad idea anyway.
I started with the clipped drawer sample code and tried to build around it. When inserting components inside the sample (i.e., replacing '{'You think water moves fast? You should see ice.'} with other content), the content is constrained by the height of the drawer. When trying to insert content outside of the sample , everything starts below the drawer.
Expected Behavior: ability to place content anywhere around the drawer. I've got different components hiding/becoming visible based on drawer menu selections
I originally started with the permanent drawer example and everything worked just fine except I need the drawer positioned below the app bar.
The layout consists of a flex container that contains the Drawer and main content area. The content area (.appContent) expands to fill the space to the right (or left) of the drawer. All of your content should be placed inside this element.
Updated: Fixed styles to work on IE 11
The basic structure:
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar} />
<Drawer
variant="permanent"
className={classes.drawer}
classes={{ paper: classes.drawerPaper }}
/>
<main className={classes.appContent}>
{/* Page content goes here */}
</main>
</div>
The styles
const styles = theme => ({
// The main flex container for the app's layout. Its min-height
// is set to `100vh` so it always fill the height of the screen.
root: {
display: "flex",
minHeight: "100vh",
zIndex: 1,
position: "relative",
overflow: "hidden",
},
appBar: {
zIndex: theme.zIndex.drawer + 1
},
// Styles for the root `div` element in the `Drawer` component.
drawer: {
width: theme.layout.drawerWidth
},
// Styles for the `Paper` component rendered by `Drawer`.
drawerPaper: {
width: "inherit",
paddingTop: 64 // equal to AppBar height (on desktop)
},
// Styles for the content area. It fills the available space
// in the flex container to the right (or left) of the drawer.
appContent: theme.mixins.gutters({
// https://github.com/philipwalton/flexbugs#flexbug-17
flex: '1 1 100%', // Updated to fix IE 11 issue
maxWidth: "100%",
paddingTop: 80, // equal to AppBar height + 16px
margin: '0 auto',
// Set the max content width for large screens
[theme.breakpoints.up('lg')]: {
maxWidth: theme.breakpoints.values.lg,
},
})
Live Examples (codesandbox)
Permanent Drawer - clipped below appbar
Permanent Drawer - full height