I have an svg as a child in a container. I'm using this package . The svg is curved at one side but it loses this curvature when rendered.
Padding(
padding: const EdgeInsets.only(left: 30,right: 30,bottom: 10),
child: ClipRRect(
child: Container(
alignment: Alignment.centerRight,
child: SvgPicture.asset('assets/img/mask_purple_energizer.svg',height: 200,width: 1000,),
color: Theme.of(context).cardColor),
borderRadius: BorderRadius.circular(15),
),
),
Here is the gist of the svg file:
https://gist.github.com/horgag1/66ef8ab683f26b9c19a318769a2cf3e9
I don't think clip rects are supported by the SVG plugin you're using, or at least not how they are in your SVG. The right-side corners aren't being cropped properly either, but you can't tell that because the ClipRRect takes care of it.
If the SVG editor you're using supports it, you may be able to apply the clip to each shape instead of having it separate. Otherwise, your options are to either raise a bug or add clipping to the plugin, or to use a ClipPath widget and manually define the clipping path (or copy it out of the svg).
Related
Can a ContinuousRectangleBorder (AKA Squircle, Superellipse) shape be used as a template for masking another widget?
Context
I'm trying to mask a widget using ClipRRect but the customization options it offers only include traditional border radius which doesn't quite generate the same shape as a container decorated with ContinuousRectangleBorder
Example:
In this approach, the ClipRRect destroys completely the original shape of the ContinuousRectangleBorder if its radius is too big, if it is too small it won't clip both the filter and the container appropiately. I tried with elliptical radiuses but still it does not look as expected
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(40)),
child: BackdropFilter(
// Filter
filter: ImageFilter.blur(
sigmaX: 20,
sigmaY: 20,
),
// Container with ContinuousRectangleBorder
child: Container(
constraints: BoxConstraints(maxWidth: 600),
decoration: ShapeDecoration(
color: Colors.blue,
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(80)),
),
),
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Text("Hola World"),
),
),
),
);
What I've Tried
I tried using an Stack with two layers:
Stack
|- Layer 1: BackdropFilter inside a traditional ClipRRect hoping to simulate the shape of the ContinuousRectangleBorder behind the real ContinuousRectangleBorder without affecting the real geometry of it.
|- Layer 2: ContinuousRectangleBorder decoration to the final Container.
The problem with this approach is that I could not find a way for the widget within the Layer 1 to occupy the entire width and height of its brother in Layer 2
Hypothesis
Stack: I think this is the closest I've been to solve this case, but it is not the best solution since it simulates the result. (And I'm still stuck where I can't make the Layer 1 container to fill all the space available in the stack.
I read about about the ClipPath widget but it takes a Path as an argument and I have not been able to convert the ShapeDecoration to that type and use it as a mask.
It may be another way to create the ContinuousRectangleBorder look in order to use it as a mask and a container? I found it is also called squircle / superellipse but the packages and solutions to recreate it use a ShapeDecoration just as ContinuousRectangleBorder does.
Maybe an alternative way to make a mask that takes the ContinuousRectangleBorder as an argument and wraps its child?
Open discussion
I'm aware the last 2 hypothesis are a bit far from the original question but I'm open to make things in other ways.
Thank you all for your help.
Thanks to #pskink advice, the correct way to achieve this is by using a ClipPath and passing the ContinuousRectangleBorder as a shape of a ShapeBorderClipper
Example:
ClipPath(
clipper: ShapeBorderClipper(
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(80),
),
),
),
child: Text("Hola World"),
);
I need to customize the App bar like below, with rounded style and it floats on top of all other widgets:
Its similar to Google Map app. What would be the best way to achieve this customization?
Thanks for any advice or guides to approach this...
You can use Stack widget to display a widget on top of another widget (page content in your example). So use Stack to place search / app bar on top of main app content and customize as your needs.
You can check this youtube video to learn more about Stack widget.
Here's sample code, you can place inside Scaffold.
Stack(
children: <Widget>[
// this will be filled entire screen
Positioned.fill(child: Image.network('https://i.imgur.com/SJGDZUp.png')),
// this will be placed top of the screen with 15 points distance
Positioned(
top: 15,
left: 15,
right: 15,
// using SafeArea to avoid device frames (for example notch in iPhones)
child: SafeArea(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.black,
),
child: Text('Search...', style: TextStyle(color: Colors.white)),
),
),
),
],
),
DISCLAIMER: I haven't tested the code, so, it may contain syntax issues or typos
I have a rather easy problem, but which I cannot seem to solve efficiently.
So I have a row of a changing number of Containers with a centered Circle, for which I used a circle icon from the Font Awesome package. And what I want to do is to connect the sides of these circles so that they form a chain.
I though of creating a custom icon, a circle with a line to the side long enough to reach the next circle.
Another option would be to use Stack and manually place a line between the cirlces, but because the number of cicles is changing, I fear the that the line will overflow the circle boundries.
Any of ou have an idea how to solve this efficiently?
Edit:
So here is a picture of what I want it to be like:
Picture of the Chain
My Code right now is just
Row(
children: <Widget>[
Container(
child: Center( child: CircleIcon ),
),
Container(
child: Center( child: CircleIcon ),
), ...
You can just use Container for this. Really simple with Container.
Container{
height: 50, // give any height you need
width: 50, // give the same as height,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black
),
),
}
I am trying to use this custom weather font in my Flutter app, but I am having some trouble with the spacing.
It seems as if the icons are rendering outside of their containers, which is causing some layout problems.
This code creates the following
Container(
color: Colors.amber,
child: Icon(
IconData(0xf05c),
size: 100,
),
);
As you can see the icon is not centered in its bounding box.
Here is an example of another icon:
What is the best approach for making it so all the icons take up the same space, and are centered in their boxes?
I ran the above code using a regular built in Icons instead and the container automatically centered the icon
Container(
color: Colors.amber,
child: Icon(
Icons.access_alarm,
size: 100,
),
),
Where did you get those 2 images? I am wondering if those 2 custom images may be what is messing up the alignment on that Container parent. Could those 2 images have any extra padding built into the image itself that may be throwing it off?
The alignment of Container's parent container sometimes affects the internal alignment of Container, which can be ensured by adding alignment attributes to Container.
Container(
alignment:Alignment.center
color: Colors.amber,
child: Icon(
IconData(0xf05c),
size: 100,
),
);
When applying ImageFilter.blur to an image, the edges of the image are unchanged.
How can I extend the blur to the edges?
import 'dart:ui';
import 'package:flutter/material.dart';
class ExamplePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
);
}
}
This may not be what you want to hear, or it might be =D. The issue you're seeing is that Skia's software renderer has a problem with blurs. You won't see the same issue on the Android simulator unless you specifically turn on software rendering, nor on actual devices as they use hardware rendering.
This is on my iPhone:
If you really need blur to work properly in the simulator I'd recommend either adding a +1 to this issue or making a new issue in the flutter repo with the image above (as in the issue I linked to it seemed they were seeing inconsistency rather than exactly what you've observed, although I'd imagine the fix would fix what you're seeing as well).
A solution that wouldn't require that bug to be fixed for the simulator is possible I think.... You could theoretically use an overflow to make the blur go outside of the edge of the screen by at least the size of the blur, have the image then offset by the same amount as the overflow, and flip copies of the same image outside of the screen bounds so that the colouring on the blur is right.... but that seems a bit overkill =D.
The fix will be available soon in the stable version of Flutter SDK, until that if you need it, switch to the master channel by running this in terminal and rebuild your app:
flutter channel master
source: Backdrop filter is inconsistent on software rendering
If you replace you above mentioned code with
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
);
Then it look like this and edges issue resolved