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
Related
The images are too large to be a lock screen wallpaper, so I want the user to select the desired part by swiping left and right.
I am using InteractiveViewer to scroll left and right.
How can I make the scrolled image as wallpaper when the user presses the set as wallpaper button?
----------->
(wallpaper when I press the button) ----------- (wallpaper which I want to set)
Here is my widget tree:
Stack(
children: <Widget>[
Hero(
tag: widget.heroId,
child: Container(
alignment: Alignment.center,
child: InteractiveViewer(
maxScale: 5.0,
constrained: false,
child: FadeInImage(
height: MediaQuery.of(context).size.height,
placeholder: AssetImage('assets/images/loading-5.gif'),
image: NetworkImage(widget.imageUrl),
fit: BoxFit.cover,
),
),
),
),
Positioned(
right: 16.0,
top: 0.0,
child: ElevatedButton(
onPressed: () {
_setwallpaper(WallpaperManagerFlutter.LOCK_SCREEN);
},
child: Text("Set as Wallpaper")),
),
],
)
Here is set as wallpaper function:
Future<void> _setwallpaper(location) async {
var file = await DefaultCacheManager().getSingleFile(widget.imageUrl);
try {
WallpaperManagerFlutter().setwallpaperfromFile(file, location);
GlobalSnackBar.show(context, 'Wallpaper updated');
} catch (e) {
GlobalSnackBar.show(context, 'Error Setting Wallpaper');
print(e);
}
}
I am wondering if it is possible to repeat an actual icon widget like the image I have attached.
Currently getting this result using ImageRepeat but would like to be able to use and actual icon so it can be modular and the icon can change.
( the repeating image can currently change but I don't want to have to create 100 images of icons. )
Current Solution:
SizedBox.expand(
child: Image.asset(
_backGroundImage,
repeat: ImageRepeat.repeat,
)),
try Wrap:
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.orange,
child: Wrap(
children: List<Widget>.generate(2000, (int index) {
return Icon(Icons.add);
}),
),
),
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
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
I want to overlap the bottom edge of a widget with another widget so that it looks like this:
I am using a stack to position the arrow button over the card. At the moment I just set the position with an invisible box above it. The issue is that this method only works for that exact resolution - it should be screen size independent.
The necessary code for the widget:
Stack(
children: <Widget>[
Container( //background
height: 100,
width: 100,
),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {},
)
],
)
Update - April 2021
You can no longer use the overflow property in a Stack widget as it has been deprecated. Use clipBehaviour instead. Source: Flutter docs
You can use the Stack and Positioned widget to achieve this UI.
Stack(
clipBehavior: Clip.none,
children: <Widget>[
Container(
color: Colors.amber,
height: 150,
width: 150,
),
Positioned(
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print('FAB tapped!');
},
backgroundColor: Colors.blueGrey,
),
right: 0,
left: 0,
bottom: -26,
),
],
),
Output:
Update - March 2022
The Area which is outside of Stack won't be clickable due to the platform limitation, and that is how the Stack widget works.
You can learn more about the same in this issue.
As of November 2019 I'd like to add a second solution:
Using package: https://pub.dev/packages/assorted_layout_widgets
var widget1 = ...;
var widget2 = ...;
ColumnSuper(
children: [widget1, widget2],
innerDistance: -26,
);
The difference from this solution to the one using Stack is that Positioned widgets in a Stack don't occupy vertical space. However, the ColumnSuper will have the size of all of its children widgets. Note I am the author of this package.
You could try my package (signed_spacing_flex). It's exactly the same as a normal Column (or Row and Flex). But it lets you set negative spacing which causes its children to overlap. You can also set which children should be on top when they overlap.
In your case it would be something like:
SignedSpacingColumn(
spacing: -16.0,
stackingOrder: StackingOrder.lastOnTop,
children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
FloatingActionButton(
child: const Icon(Icons.arrow_forward),
onPressed: () {},
)
],
)
It works with expanded children if you need.