I have a PageView with Stack children. those Stack widgets contain transparent containers that controlls the opacity level relative to the scroll position.
the expense is that now I am unable to scroll what's in the background. what is the best way to add that layer and keep my backround scroll active.
Updating the Listview widget seems expensive as the opacity transion changes that is why I tried to keep it separate
I have something like this
Stack(children: [
Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
child: ListView..., // the listView I am trying to scroll
),
),
),
currIndex == 1 ? MainCardTransitionContainer() : Container(), // the layer with opacity
]),
Try IgnorePointer:
Stack(children: [
Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
child: ListView..., // the listView I am trying to scroll
),
),
),
currIndex == 1 ? IgnorePointer(ignoring: true, child:MainCardTransitionContainer(),) : Container(), // the layer with opacity
]),
Try this
Stack(children: [
currIndex == 1 ? MainCardTransitionContainer() : Container(), // the layer with opacity
Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
child: ListView..., // the listView I am trying to scroll
),
),
),
]),
It's because the top widget of stack is kept at background and last widget is placed in foreground.
In short keep background element at top of stack
Related
I have this design, The first section in the red box is fixed height size, and The second section is the dynamic height (ListviewBuilder) which changed the content based on the tabBar.
My question is How can I use the TabBar view inside the scrollable widget (custom scroll view/listview etc..)
the solution That I currently found is to use a customScrollView and use SliverFillRemaining like that
SliverFillRemaining(
child: TabBarView(
children: [],
),
),
but that adds extra white space at the bottom of the list and I can't remove it by
making hasScrollBody property false
You could probably achieve what you want with this kind of template :
Scaffold(
body: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * .33,
child: Container(/* Content of the first section */),
),
Expanded(
child: DefaultTabController(
length: 2,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 50,
child: TabBar(
tabs: [Text("Guest"), Text("Service")],
),
),
),
SliverFillRemaining(
child: TabBarView(
children: [
// Your ListView Builder here
],
),
),
],
),
),
),
],
),
);
Seeing the bit of code you posted, it is probably close to what you already have but after test it doesn't adds extra white space at the bottom.
If it continue to display the same behavior, adding a little more context could help us provide a more accurate answer.
I want to remove the strange padding on top of the status bar. I am simply using an image and want to put that image on top of the screen that is behind the status bar. So that the status bar icons should be overlayed on the image.
Simply using Scaffold as a parent widget and then simple an Image. Screen shot is here!
The icons are not properly overlapping the image, and there is a white padding on top head!
I am using an Android Emulator right now, can somebody please figure out what I am missing.
class PreSignInScreen extends StatelessWidget {
final PreSignInController controller = Get.put(PreSignInController());
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 10,
),
getRedCarBox(context),
]
);
)
}
Thanks & Advance
Try below code, I have tried
- Scaffold
- Column
- Container
- Image
Your Widget:
Scaffold(
body: Column(
children: [
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2022/03/27/11/23/cat-7094808__340.jpg',
),
),
),
),
//Add your other widgets here
],
),
),
Or Using SafeArea, top property false
SafeArea(
top: false,
child: Container(),
),
Result Screen->
Try this:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
return false;
},
child: Scaffold(
body: SafeArea(
top: false,
bottom: false,
child: _buildBody(),
),
),
);
}
Scaffold(
body: SafeArea(
top: false,
bottom: false,
child: _yourBody(),
),
Why to use SafeArea :
SafeArea class Null safety. A widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen.
I have 2 widget in stack. One of them is aligned in center. And the widget which is on the top is other stack. And I want show second widget with first widget's top and left position. Here is the explain:
The yellow area is my stack. And first widget is setted like Center(child: myFirstWidget). My second widget is referenced from here it's a resizable widget so it's an another stack and it's childs are "positioned". So I need to set top and left value for initialize. But my main stack filled page So when I set my second widget's top and left to 0. It's shown as below.
But I want to show align it to centered child's top like:
My code snip:
child: Container(
color: Colors.red,
child: Stack(
children: [
Center(
child: Image.file(
File("myfilepath"),
),
),
ResizableWidget(
child: Container(
color: Colors.blue,
),
),
],
),
),
You can adjust the position of the widgets with the Position widget like this:
Positioned(
child: ResizableWidget(
child: Container(
color: Colors.blue,
),
),
top: 80,
right: -5,
),
The value of top and right are just random values, you should check what works for you!
You should make Center the parent of the Stack.
The Stack will be positioned at the center of its parent because of Center, it will get the dimensions of its biggest childs (height and width) and will position other childs according to the alignment value.
Edit : I modified the code to include a placeHolder image. Here I gave it a 6000x2000 size but you can change it to whatever value you want. Code is working as expected, see capture below.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Stack(
alignment: AlignmentDirectional.topStart,
children: [
Image.network('https://via.placeholder.com/6000x2000'),
SizedBox(
height: 50,
width: 50,
child: Container(
color: Colors.green,
))
],
),
),
);
}
Flutter web.
When we scroll by dragging the mouse, parent scrolls even when child listview is under cursor. But while scrolling with mouse wheel or double finger swipe gesture on touchpads, the scroll behavior is different. The parent stops scrolling and child starts scrolling when child listview comes under cursor.
gif of example
You can try the following code.
var _container = Container(
height: 200,
color: Colors.blue,
margin: EdgeInsets.symmetric(vertical: 10),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ListView")),
body: Padding(
padding: const EdgeInsets.all(40.0),
child: ListView( // parent ListView
children: <Widget>[
_container,
_container,
Container(
height: 200, // give it a fixed height constraint
color: Colors.teal,
// child ListView
child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))),
),
_container,
_container,
_container,
],
),
),
);
}
What I want is for the mousewheel scroll to behave like dragging. How can I get that?
The purpose of the application is to show many buttons that the user must select. Unfortunately infinite scrolling is not a user friendly tool here and it would be preferred to not have the user make any more actions than necessary.
As such, I need the horizontal ListView to be within one screen and expand under, adding new rows. I've tried adding a SizedBox, but the ListView row is still infinite and goes off screen.
return new Scaffold(
appBar: AppBar(
title: Text("Test"),
),
body: SizedBox(
width: 300.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _rowWidgets.toList() // these are just IconButtons
),
)
);
The number of items may vary and I cannot divide the list into sublists consistently on all screens.
It seems you need Wrap widget. Of course widget has no horizontal scrolling like in ListView. So you have to provide vertical scrolling to show a lot of buttons.
return Scaffold(
appBar: AppBar(
title: Text("Test"),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
color: Colors.green,
width: 300.0,
child: Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: List.generate(9, (i) => item(i.toString())).toList()
),
),
)
);