![enter image description here][1]
This is my first post.
I would like to implement an animation of a circle spreading out like in the image link, how should I implement it?
First of all, we wanted to make the entire screen blue, so we changed the code as follows
LayoutBuilder(
builder: (context, constrains) {
return Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
]
),
Positioned(
right: -constrains.maxWidth * 0.1,
bottom: constrains.maxHeight * 0.2,
child: ClipOval(
child: AnimatedContainer(
duration: const Duration(milliseconds: 1000),
color: isSwipeEnd
? theme.appColors.primary
: Colors.transparent,
width: isSwipeEnd ? constrains.maxWidth * 2 : 200,
height: isSwipeEnd ? constrains.maxHeight * 1.5 : 200,
),
),
)
],
);
},
),
However, this doesn't cover the entire screen in blue. Also, why does the center of the circle move from the bottom right to the top left? Why is this? Also, how do I stop the center of the circle from moving?
Related
I have a set of x/y coordinates which I'd like to use to show widgets on top of an Image widget at those specific coords, relative to the original image dimensions (i.e. coords of 100/100 would show a widget at 100/100 on the image).
I'm currently using a Stack containing the Image and some Positioned widgets, but I can't get them to display in the right place. The positioned widgets aren't displaying in the correct position on the image, possibly because of the image scaling?
Any ideas how I could achieve this? Thanks
For some context, the image is a map and the positioned widgets are pins on the map
Code for the pin widget (top/left is y/x):
Positioned(
top: top,
left: left,
child: GestureDetector(
child: IconTheme(
child: Icon(Icons.location_pin),
data: IconThemeData(
color: available ? Colors.green : Colors.red,
),
),
onTap: () => print("Selected space $spaceId"),
),
);
Code for the interactive viewer + stack:
transformationController: widget._controller,
maxScale: 4.0,
minScale: 0.2,
child: Stack(
children: [
Image.network(
"https://i.pinimg.com/736x/bd/d6/f5/bdd6f5247dbea0e5eedf33fe8cc491ee--office-layout-plan-office-floor-plan.jpg",
fit: BoxFit.cover,
alignment: Alignment.center,
height: double.infinity,
width: double.infinity,
),
...getSpacePins()
FutureBuilder<List<SpacePin>>(
future: spaces,
builder: (context, snapshot) {
if (snapshot.hasData)
return snapshot.data![1];
else if (snapshot.hasError) return Text("Error");
return const CircularProgressIndicator();
},
)
],
),
)
The method getSpacePins() returns a list of pin widgets in to the stack.
I don't have the reputation to directly comment. I've got the same problem but haven't solved it 100% yet, nor found anyone who has the answer. For this place the Image in a Stack Widget. Place layers of pins by looping through your list of pins. Wrap the pins in a positioned widget. The Issue I have here is the X and Y are correct and the math I have is correct but its off set by things like the app bar height and other padding in the scaffold. I can't seem to apply it to the X, Y of the Image on the stack.
for (Pins pin in listOfPins)
Positioned(
top: (pin.y ?? 0) * constraints.maxHeight,
left: (pin.x ?? 0) * constraints.maxWidth,
child: Image.asset(
DRAWINGS_PINS_PATH,
height: 40,
width: 40,
)
I am trying to get a text label with graphics over the image. Labels like new arrival, best seller, limited, on sale just like on the pic attached.
enter image description here
Here's what i think the skeletal layout would be :
return Stack(
children: [
Card(
color: Colors.black54,
child: Image.asset('assets/xyz.png'),
),
Align(
//for bottomRight
alignment: Alignment.bottomRight,
child: Image.asset(
'assets/fireimg.png',
), //can be an SVG converted to png
),
Align(
//for topLeft
alignment: Alignment.topLeft,
child: Image.asset(
'assets/label.png',
), //can be an SVG converted to png
),
],
);
Feel free to give the Padding of your choice.
it has so much code to write , so i will give some examples to achieve that output
in this image ,i mentioned 0 and one .
for all 1
solution 1
you can use image like this way
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.amber,// added only for view this example
child:Image() // add Product image here
),
Positioned(
top: 20, //change according to your use case position
left: 0,// change according to your use case position
child: Container(
color: Colors.black, // added only for view this example
decoration: BoxDecoration(image: ),// add label image here
width: 100,
height: 50,
child: Row(
children: [Text('hi')],
),
))
],
)
solution 2
you can use custom paint for label layout
not that
in both solution you have to use stack and position widgets , you can control position according to your use case
for all 0
you can use RotationTransition widgets to achieve this
not that
you have to use stack and position widgets , you can control position according to your use case
for the vertical Text
use this example
String exText = "meta";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hi'),
),
body: Container(
width: 200,
height: 200,
color: Colors.amber,
child: Column(
children: exText.characters
.map((e) => Container(
child: Text('$e'),
))
.toList()),
),
out put will be
Hi I'm currently stacking buttons in flutter using
Transform.scale(
scale: 0.5,
child: Stack(
children: List.generate(data.length, (int index) {
Alignment alignment = alignments[index];
String message = messages[index];
return Align(
alignment: Alignment(
alignment.x,
alignment.y
),
child: SizedBox(
key: UniqueKey(),
width: 100.0,
height: 100.0,
child: MaterialButton(
key: UniqueKey(),
onPressed: () {
print("Specific message: "+message.toString());
},
child: Container(
width: 100.0,
height: 100.0,
color: Colors.pink,
child: Text("message: "+message.toString()),
),
),
),
);
}),
),
)
However this only works for the first few handful of widgets, the later widgets no longer print the message or register the click.
====
Side note I have just tested where alignment is Alignment(0.0, 0.0) and the top button works. However, when it has alignment away from the centre it doesn't work.
====
I have a suspicion if a button is built initially off screen you won't be able to press it even if you scale the whole screen.
To fix the problem all the buttons need to be on the screen at scale: 1.0
So I have a rotating container
Here is the working code:
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 32),
)..repeat();
super.initState();
}
....
#override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
double screenWidth = MediaQuery.of(context).size.width;
return Container(
child: Column(
children: <Widget>[
SizedBox(
height: screenHeight,
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
],
),
Divider(),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
return Transform(
alignment: FractionalOffset.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateY(0.5 * -math.pi)
..rotateZ(-0.1 * math.pi)
..rotateY((_controller.value - 0.6) * -math.pi)
..rotateX(0.5 * math.pi),
child: child,
);
},
child: Container(
//color: Colors.yellow.withOpacity(0.5),
height: 300,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.yellow.withOpacity(0.5),
spreadRadius: 40,
//UNCOMMENTING THIS LINE CAUSES STRANGE BEHAVIOUR
//blurRadius: 50,
//offset: const Offset(0, 0),
),
],
),
),
//),
),
),
SizedBox(
height: 170,
)
],
),
],
),
),
],
),
);
}
However, when I uncomment the blurRadius line of code, it behaves strangely. Look how the container kind of gets distorted when it comes perpendicular to the screen.
I want it to be consistently blurred. This is something strange.
Shadows are very expensive for Flutter to draw, so it's bad to animate them like this because Flutter has to keep repainting the shadow. Since the shadow is also causing your transform problem, you should try to make the shadow you want in GIMP/Adobe or screenshot it in flutter, then add it to your project.
You should have an assets or images folder in your project directory, i.e, YOUR_FLUTTER_PROJECT/images. Put the shadow image in there.
Then, in the pubspec.yaml file, there should be a field for your assets. Add the path to the shadow file there, e.g.:
assets:
- images/a_dot_burr.jpeg
- images/a_dot_ham.jpeg
- images/YOUR_SHADOW_FILE
Run flutter pub get
In your code, replace your Container with this:
Image.asset('images/YOUR_SHADOW_FILE', height: 300, width: 200),
I haven't tested it, but I reckon it should still work.
I don't know the reasons behind it but removing the line ..setEntry(3, 2, 0.002) will remove the issues. However, there is a slight dimension issue during the animation which I thinks because of relativity. With the above line, it seems like animation decrease the blur effect with the increase of animation completion factor and reset to provided value when it reaches the starting point of animation.
I have integrated CircularProgressIndicator in my app on login. The indicator is visible as desired but it hides my login screen with a white overlay. I want to make its background transparent instead of white. I tried to give the background color of CircularProgressIndicator but it doesn't make any change. Here is my code:
child: !_isLoading ? _loginScreen(loginBloc.state) : Center(
child: const SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(),
),
)
Thank you.
You can use Stack with different opacity on its childern.
E.g.
Stack(
children: <Widget>[
Opacity(
opacity: 1, // You can reduce this when loading to give different effect
child: AbsorbPointer(
absorbing: _isLoading,
child: _loginScreen(loginBloc.state),
),
),
Opacity(
opacity: _isLoading ? 1.0 : 0,
child: CircularProgressIndicator(),
),
],
);
In case you want working solution, I use it heavily in https://github.com/yagnyam-in/proxy-flutter/blob/master/lib/widgets/loading.dart, https://github.com/yagnyam-in/proxy-flutter/blob/master/lib/widgets/async_helper.dart