I want to add badges (showing that new content is available) to Drawer in Flutter.
I use ListTile to present menu items inside Drawer widget.
ListTile(
title: Text("I'm a list tile"),
// this trailing widget can be the badge.
trailing: Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(100)),
),
),
)
Related
When I click at an option of my bottom dialog, I want the bottom dialog to be replaced by an alert dialog, Here is my onTap's function code:
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (_) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
backgroundColor: AppTheme.backgroundColor,
title: Text('Select reaction'),
content: Container(
height: 100,
width: 100,
),
),
));
found it! i forgot to remove one line of code, now works perfectly,
as well, i replace
Navigator.of(context).pushReplacement(.....
with
showDialog(....
I don't understand why this FAB doesn't center it's child. I've tried different things but cannot make it to center perfectly. Because adding for example padding only bottom to the icon could make it center on a Device but maybe not for all.
this is my code
Theme(
data: Theme.of(context).copyWith(
highlightColor: Colors.red, splashColor: Colors.red),
child: SizedBox(
height: MediaQuery.of(context).size.height / 7,
width: MediaQuery.of(context).size.height / 7,
child: FloatingActionButton(
elevation: 100,
shape: new CircleBorder(
side: new BorderSide(
color: Colors.black, width: 5.0)),
backgroundColor: Colors.orangeAccent,
onPressed: () {},
child: new Icon(
FontAwesomeIcons.chevronUp,
size: 80,
)),
),
),
and this is the not centered FAB with it's icon child.
does it seems only to me that the icon isn't centered?
Same code with Icons.person
same code with Text widget
Same code with chevronCircleUp
I've used Show Debug Paint by the way. And I've used chevronCircleUp, just to see clearly the area of widget. I think you are right, it's not centered enough, however, this examples made me think that the problem is related to FontAwesome icons.
There are also this issues
Font Icon Render Box not large enough for some characters
Rectangular icons are centered incorrectly
So I've applied the workaround on the first issue, here is the code. It must be good enough now.
Theme.of(context)
.copyWith(highlightColor: Colors.red, splashColor: Colors.red),
child: SizedBox(
height: MediaQuery.of(context).size.height / 7,
width: MediaQuery.of(context).size.height / 7,
child: FloatingActionButton(
elevation: 100,
shape: new CircleBorder(
side: new BorderSide(color: Colors.black, width: 5.0)),
backgroundColor: Colors.orangeAccent,
onPressed: () {},
child: Text(
String.fromCharCode(
FontAwesomeIcons.chevronUp.codePoint),
style: TextStyle(
fontSize: 72.0,
fontFamily: FontAwesomeIcons.chevronUp.fontFamily,
package: FontAwesomeIcons.chevronUp.fontPackage)),
)),
),
Edit after 3 years:
Issue still exists with Material icon (Icons.ios_share) on Flutter 2.10.0
What I want to achieve
I want to have the very first widget of a ScrollView initially centered. But if the scrollview gets scrolled, the scrollview should be has the same width as the parent and the centered widget should be the selected one.
Approach
My first idea was to use the initialScrollOffset property. but this seems to be without any effect.
#override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: _buildCarouselItems(),
itemExtent: FrettirConstants.cardWidth,
controller: new ScrollController(
debugLabel: "Carousel",
initialScrollOffset: -200,
keepScrollOffset: true
),
);
}
Sketch
This may sound like a bad practice to achieve it, but you can add an empty Container with the 3/4 width of other carousel widgets to the first position.
In my dummy code each carousel widget has length 160, and empty Container must have 3/4 of other widgets. This way first carousel widget is fully visible while second one has 3/4 visibility.
Container(
width: 160.0 * 3 / 4,
color: Colors.transparent,
),
Container(
margin: EdgeInsets.only(
right: 10.0
),
width: 160.0,
color: Colors.red,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 10.0
),
width: 160.0,
color: Colors.blue,
),
I was trying to create a login button, which will be animated on pressing on it. But while clicking on the button( on the PhysicalModel), a ripple effect is shown only on the Login text, not entirely on the physical model. How to add ripples to PhysicalModel or remove the ripple effect from MaterialButton ?
PhysicalModel(
color: Colors.teal,
borderRadius: BorderRadius.circular(50.0),
child: MaterialButton(
key: _globalKey,
child: Text("Login"),
onPressed: () {
setState(() {
if (_state == 0) {
animateButton();
}
});
},
elevation: 4.0,
minWidth: _width,
height: 20.0,
),
)
If you want to remove the splash color of the MaterialButton just change these colors to transparent.
MaterialButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
If you want ripple effect for your PhysicalModel:
PhysicalModel(
color: Colors.teal,
borderRadius: BorderRadius.circular(50.0),
child: RawMaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0)),
padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 30.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text("Login"),
onPressed: () {
setState(() {});
},
elevation: 4.0,
),
)
Here is my solution, you can simply set Your PhysicModel color to transparent, while using a Ink widget set color to what you need for your child widget:
PhysicalModel(
borderRadius: BorderRadius.circular(16),
shadowColor: Colors.grey.withAlpha(10),
elevation: 16,
color: Colors.transparent,
child: Ink(
color: Theme.of(context).scaffoldBackgroundColor,
child:
It's simply, and then you can have Inkwell effect as well as keep your color.
Adding Material Touch Ripples
Flutter provides the InkWell Widget to achieve this effect.
Definition:
A rectangular area of a Material that responds to touch.
Also: The InkWell widget must have a Material widget as an ancestor. The Material widget is where the ink reactions are actually painted. This matches the material design premise wherein the Material is what is actually reacting to touches by spreading ink.
Directions
Create a Widget we want to tap
Wrap it in an InkWell Widget to manage tap callbacks and ripple
animations
InkWell(
// When the user taps the button, show a snackbar
onTap: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Tap'),
));
},
child: PhysicalModel(
color: Colors.teal,
borderRadius: BorderRadius.circular(50.0),
child: MaterialButton /*or a FlatButton */(
key: _globalKey,
child: Text("Login"),
onPressed: () {
setState(() {
if (_state == 0) {
animateButton();
}
});
},
elevation: 4.0,
minWidth: _width,
height: 20.0,
),
)),
I need to rotate a text inside a card. What I would like to obtain is this:
But I don't know how can i do this with flutter. The problem I am facing is that the text view exceeds the card.
Here is what I have so far:
Widget cardDetails(String title, String imgPath) {
return Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(15.0),
child: Container(
height: 135.0,
width: 135.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0), color: Colors.white),
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Transform.rotate(
angle: -pi / 4,
child: Container(
height: 15.0,
width: 55.0,
alignment: Alignment.topCenter,
color: const Color(0xFFFFd77B),
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
),
),
),
),
],
),
),
);
}
And here it's how it looks like:
Thanks in advance
The simplest way to make a banner is to use the Banner widget. However, it still paints outside the bounds of the item you're using, and unfortunately is not nearly as configurable as it could be (and doesn't handle things like longer text).
To fix the painting outside the bounds, all you need to do is add a ClipRect right under your card widget, and that should fix the overflow with the Banner widget or for what you're doing with the rotated box.
Depending on how configurable you need the banner to be, you could re-implement the Banner widget - using TextPainter you could figure out the length of the text and resize automatically based on it if need be (and to remove the dropshadow...)