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);
}),
),
),
Related
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
I have this code in my build:
XFile? file;
...
body: Container(
color: Colors.black,
child: SizedBox(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
child: AspectRatio(
aspectRatio: 1,
child: GestureDetector(
onTap: () => editPhoto(),
child: Image.file(File(file!.path))), //here is the line with problems
),
),
)
With my editPhoto() method, I modify the file whose path is read in my Image.file, but in my screen I still see the old image before the edit. Now, I know for sure that the file has effectively changed because in another part of my code I can see the changes, so the problem is that Image.file doesn't update. How can I solve?
I'm making a learning app with flutter.
In our app, you have to put a button over the picture.
So, using positioned on the picture, I made it like the picture below.
#override
Widget build(BuildContext context){
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
image: AssetImage("assets/oral_structure.png"),
fit: BoxFit.fitWidth
),
Positioned(
top:385, left:17,
child: FlatButton(
child: Text('ㅂ', style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold)),
shape: CircleBorder(),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => B()),);
},
)
),//ㅂ
However, the problem with this is that the position of the buttons changes when using a phone with a large screen.
What can be done to prevent this?
The button seems always in the same place. It should be independent of screen size.
I suspect your problem is rather with the fontSize of the text.
Try to remove the fontSize:, it should fix your problem
EDIT 1:
the problem is with fit: StackFit.expand, that forces the button to expand. You can keep it but wrap your button inside a SizedBox
const SizedBox(
width: 200.0,
height: 100.0,
child: FlatButton(// your code here...),
)
Try to get the width and height of screen, and calculate base on that with a radio.
I'm new to flutter and have been trying to get a list of chipsets wrapped in a Wrap widget with the ability to add more of them through a button shown in the image. However, the button isn't able to wrap along with the chipset horizontally. Below is an image of the design to make it clearer.
Code:
Container(
child: Wrap(
children: [
Container(
child: Wrap(
children: _chipsetList,
),
),
SizedBox(width: 2),
Container(
height: 35,
width: 35,
child: FittedBox(
child: FloatingActionButton(
heroTag: null,
elevation: 0,
shape: StadiumBorder(
side: BorderSide(width: 2.0)),
onPressed: () {
_getMoreChips(context);
},
child: Icon(Icons.add),
),
))
],
),),
I tried to experiment with SingleChildScrollView property or with Wrap direction but in vain. What could be a way to get this design working?
Seems you want to put chips and the button in the single wrap. To do so, combine them in a single list and use this list as wrap's children
List<Widget> items = List.from(_chipsetList); // copy
Widget button = FloatingActionButton();
items.add(button);
Wrap(
children: items,
)
Or, using spread operator
Wrap(
children: [
..._chipsetList,
FloatingActionButton(),
],
)