IgnorePointer(
child: cProtractor & darkModeOn
? Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Center(
child:
Image.asset('lib/assets/img/cprot2white.png',
width: 500.0, height: 500.0),
)))
: SizedBox())
]));
}
}
The above function switches on and off a protractor overlay for my Google Map. Its parent is a body: Stack(children: [. Is there any way to fix this or get rid of the error? The function is working.
You have to remove Ignore pointer as parent widget of Positioned Widget as Positioned widgets are placed directly inside Stack widgets.
You can achieve the same using below code
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: IgnorePointer(
child: Center(
child: Image.asset('lib/assets/img/cprot2white.png',
width: 500.0, height: 500.0),
),
))),
Here just the hierarchy of the widgets are changed
Related
I'm using a Stack to Positioned one widget on top of an Image.asset widget, but the problem I have is that my whole Stack widget is not scrollable to see the whole content. I wrapped the Stack widget with a SingleChildScrollView but the problem still persists. If I wrap the Stack widget with a Containter and give the height: MediaQuery.of(context).size.height, it's scrollable but I can't still see the whole content of the page. Where is my mistake, that's what I'm wondering? With what widget should I wrap Stack or is there a better way for my problem? In short, I'm stacking a Column on top of an Image and I need the whole Stack widget to be scrollable so I can see the whole content of the Stack widget. Here is the code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
overflow: Overflow.visible,
children: [
Image.asset(
'lib/modules/common/images/logo.png',
width: double.infinity,
height: 196.0,
),
Positioned(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
top: 136.0,
child: Column(
children: [
Container(), // some content inside the container
Container(), // // some content inside the container
],
),
),
],
),
),
),
);
}
Thanks in advance for the help!
if you mean to have a image on back and scrollable content at fron check this answer, if not let me know and share a prototype/image that you want.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 3,
child: Stack(
fit: StackFit.loose,
children: [
Align(
alignment: Alignment.topCenter,
child: Image.asset(
'assets/image.jpg',
width: double.infinity,
height: 196.0,
),
),
Positioned(
top: 136.0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
2,
(index) => Container(
height: 100,
width: double.infinity,
color: index % 2 == 0
? Colors.amberAccent
: Colors.cyanAccent,
), // some content inside the container
// some content inside the container
),
),
),
),
],
),
),
),
),
);
}
I want to draw two clip-paths on the same page. Unfortunately, I am not successful in it.
Sample
Separate your page into multiple layouts e.g. Stack as a parent and two widgets e.g. Container and clip each path with its own Clipper.
Example:
return Stack(
children: [
Container(
alignment: Alignment.center,
child: ClipPath(
clipper: MyCustomClipper1(),
child: SizedBox(
width: 320,
height: 240,
child: Container(),
),
),
Container(
alignment: Alignment.center,
child: ClipPath(
clipper: MyCustomClipper2(),
child: SizedBox(
width: 320,
height: 240,
child: Container(),
),
),
],
);
Maybe I have few mistakes since I wrote the code directly here, feel free to ask for more details, maybe I can help.
My first question is how to set image in bottom right corner, and the answer is
Align(
alignment: Alignment.bottomRight,
child: (Image(image: AssetImage("images/bg_decore_up_la.png"),)),
),
It is working fine,
But in parent Scaffold I set
resizeToAvoidBottomInset: true,
means scroll is happening when keyboard is appear.
For this ,
This Align (image) widget i set out of SingleChildScrollView
Now my whole code like
Scaffold(
resizeToAvoidBottomInset: true,
appBar:AppBar(),
body:SafeArea(
child:Stack(
children:[
Align(
alignment: Alignment.bottomRight,
child: (Image(image: AssetImage("images/bg_decore_up_la.png"),)),
),//want to fixed widget when keyboard will appear
ScrollConfiguration(
behavior: MyBehavior(),
child: SingleChildScrollView(
//scrolling widget list
)
)
]
)
)
);
If i set
Align(
alignment: Alignment.topRight,
child: Container(
margin: EdgeInsets.only(top: 60),
child: (
Image(
image: AssetImage("images/bg_decore_bottom_la.png"),)),
),
this code fixed the issue,
but for this i need proper top margin
topMargin=totalScreenHeight-ImageWidth;
Use a Stack and Positionned widget like so
Stack(
children: const <Widget>[
Positioned(
bottom: 0,
right:0,
child: (Image(
image: AssetImage("images/bg_decore_up_la.png"),
)),
)
],
),
Project
Hi,
I was trying to align some widgets inside a Stack in Flutter. My end result was something like:
I know that this can be easily achieved with a Row but I want to animate the position ot the two children so I'm forced to use stack.
My problem is simple:
Example code
return Container(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: _buildSign(),
),
Align(
alignment: Alignment.centerRight,
child: _buildSign(),
),
],
),
);
This will not render as I expected. No matter what I put in the alignment field: Alignment.centerRight and Alignment.centerLeft will always place the child to the center left.
The problem is solved only if I give a fixed width to the wrapping container. Now I understand why this happend but what if I want the container to be the size of his childrens? Label is a dynamic text so his width is unpredictable for me
Any ideas?
Thanks
Hy justAnotherOverflowUser,
In your case, you have to use Positioned Widget inside Stack Widget,
it will give you what you want.
as example:
Positioned(
left: 20.0,
child: Icon(
Icons.monetization_on,
size: 36.0,
color: const Color.fromRGBO(218, 165, 32, 1.0)
)
)
The more flexible way for such alignment is to wrap Align with Positioned.fill
The original answer was posted here Flutter: bottom center widget in stack
return Container(
child: Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerLeft,
child: _buildSign(),
),),
Positioned.fill(
child:Align(
alignment: Alignment.centerRight,
child: _buildSign(),
),),
],
),
);
I have a Scaffold with the following architecture, and the body is being covered by the bottom navigation. Everything works fine if I comment the navigation.
Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
appBar: AppAppBar(title: this.title),
body: Row(
children: [
Expanded(
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: this.pageProvider.horizontalPadding,
vertical: 25),
child: this.body,
),
),
)
],
),
bottomNavigationBar: AppNavigation(),
);
This is the implementation of the AppNavigation widget:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 64,
child: BottomNavigation(),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 80,
child: WorkoutButton(),
),
),
],
);
This is the body, regardless of what widget I use:
In case it is not clear enough, the body does not have almost height.
Why don’t you use a BottomNavigationBar widget instead of a Stack?
Anyway, that happens because your Stack is unconstrained, thus, using all the available space. Give it some constrains (E.g., by wrapping it in a ConstrainedBox with some height constraint).
ConstrainedBox(
constraints: BoxConstraints.tightFor(height: 150.0),
child: Stack( ...
)
)