I am using a card inside a dialog. It occupies full screen even though the child of the card has a container widget of fixed width and height.
I am using the below code:
showDialog(context: context, builder: (context)
{
return Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
elevation: 8.0,
child: Container(
width: MediaQuery.of(context).size.width * 0.80,
height: 300,
color: const Color(0xFF465A63)
),
);
});
Wrap the Card in a size-constraining widget like SizedBox, FractionallySizedBox or Container. Give it a certain size and position it on the screen using Center or Align.
By default the showDialog() method gives you the whole screen to compose a widget, not only the small window the AlertDialog() widget for example uses.
Related
Inkwell changes my widget background color to the splash color after doing a fast double tap directly after a tap, the splash starts to get bigger slowly until it fills the widget container, and then it stays as the widget's background color.
To activate this problem, just set onDoubleTap function for the inkwell and perform a tap on the widget then after half a second, perform a double tap on that widget, you will see the splash getting bigger and bigger slowly until it fills the container and then stay there.
This is how the widget background color should be
after double tap, after half a second of a tap, the splash starts to get bigger slowly
the splash fills the container and then stays there as the background of the widget even after hover on the widget again
even if you perform this again, the splash color gets darker as I believe that because of the adding up of two splash with opacity .8
Video to show the problem:
https://youtu.be/s9pOIeVE2ck
The question is how to stop this unexpected effect.
#override
Widget build(BuildContext context) {
return Container(
height: height,
width: width,
decoration: decoration,
alignment: alignment,
margin: margin,
child: Material(
borderRadius: BorderRadius.circular(borderRadius),
clipBehavior: Clip.hardEdge,
color: Colors.transparent,
shape: shapeBorder,
child: InkWell(
highlightColor: Colors.yellow.withOpacity(0.3),
splashColor: Colors.red.withOpacity(0.8),
focusColor: Colors.green.withOpacity(0.0),
hoverColor: Colors.blue.withOpacity(0.8),
onTap: onTap,
onDoubleTap: onDoubleTap,
onLongPress: onLongPress,
onTapCancel: () {
print('tap cancel');
},
canRequestFocus: false,
enableFeedback: false,
borderRadius: BorderRadius.circular(borderRadius),
child: Container(
padding: surroundInkEdge ?? EdgeInsets.all(borderRadius),
height: height,
width: width,
alignment: alignment,
child: child),
),
),
);
}
This is a known bug on all stable versions of Flutter up to the latest version 3.0.5 at the time of this writing. It has been already fixed on master branch tough.
The problem is with the onDoubleTab property. If you don't actually need to listen to it just remove it and all works fine.
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'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.
Assuming that I have an ordinary container. How can I add a widget, for example, a Button to the border of my Container?
Container with a button on border
You can use Badges plugin. for example, in your case you can wrap the container with Badge and modify the position parameter which is a BadgePosition to the exact bottom and right values.
Badge(
position: BadgePosition.bottomRight(bottom: 0,right: 0),//change this to get the right location
badgeContent: YourWidgetAtTheBorder(),
child: YourContainer(),
)
You can use a Stack widget to overlap some widgets, then just create first the container (I used a Card just to simulate the elevation and border effect) and after that add the icon, button, etc, by deault it aligns thewidget in the TopLeft corner, I change it to the centerRight, but if you want more control just wrap the widget in an Align or a Positioned widget to move them where you want
class MyWidget extends StatelessWidget {
final Size size = Size(400, 400);
#override
Widget build(BuildContext context) {
return Stack(alignment: Alignment.centerRight, children: [
Card(
margin: const EdgeInsets.all(24.0), //half the size the icon so it looks like in the middle of the border
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
side: BorderSide(color: Colors.blue, width: 2)
),
color: Colors.grey,
child: SizedBox.fromSize(
size: size, child: Center(child: Text('MyText'))
)
),
Icon(Icons.done, size: 48)
]);
}
}
In the recent flutter release, there was new feature Open Container, here is the snippet, how to set size of the openContainer, closedbuilder is accepting and rending within its bounds, but the open builder is taking full screen size.
OpenContainer(
openElevation: 0,
closedElevation: 0,
closedColor: Colors.transparent,
transitionType: ContainerTransitionType.fadeThrough,
openBuilder: (BuildContext context, VoidCallback _) {
return SizedBox( height:240,
width:MediaQuery.of(context).size.width
child:SearchWidget());
},
closedBuilder:
(BuildContext context, VoidCallback openContainer) {
return Container(
height: 50
width: 50
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Icon(Icons.search),
const Text('Search', style: TextStyle(fontSize: 12))
],
),
OpenContainer – A container that grows to fill the screen to reveal
new content when tapped. Similar to a Hero widget.
you cant size the openBuilder method in OpenContainer Widget.
because it transforms your little container to a full view page if you want a smaller size widget after clicking on the search button you should use animatedBuilder and make your own animation