I have a listview which is equally divided into two parts(act as a background) How can i put a view above it( 100*100 w*h )?(This box should center align & top of root)
here is my tried code -
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Container(
width: ((context.findRenderObject() as RenderBox).size.width),
height: ((context.findRenderObject() as RenderBox).size.height)/2,
color: darkGreen,
),
// SizedBox(width: 10,),
Container(
width: ((context.findRenderObject() as RenderBox).size.width),
height: ((context.findRenderObject() as RenderBox).size.height)/2,
color: Colors.grey,
),
],
),
);
}
}
First of all, you don't need this line:
((context.findRenderObject() as RenderBox).size.width)
you can replace it with:
double.infinity
and it will take the maximum width the parent Widget can allow.
as for your question, you can wrap your ListView in a Stack:
Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: <Widget>[
ListView(
children: <Widget>[
Container(
width: double.infinity,
height:
((context.findRenderObject() as RenderBox).size.height) / 2,
color: darkGreen,
),
// SizedBox(width: 10,),
Container(
width: double.infinity,
height:
((context.findRenderObject() as RenderBox).size.height) / 2,
color: Colors.grey,
),
],
),
//place your desired widget here
],
),
),
Related
In my layout I have two Widgets in a row, a text and a button.
How can I achieve something like below, where only the Text is centered, and the icon is simply next to it?
---------------------------
Text *
---------------------------
Using Row would center all the contents and would output something like
---------------------------
Text *
---------------------------
Tried: Row(children:[widget1, widget2], mainAxisAlignment: MainAxisAlignment.center);
But this centers both items, causing the text to look off-centered.
You can use CompositedTransformTarget and CompositedTransformFollower as mentioned on comment section by pskink.
class AppPT extends StatelessWidget {
const AppPT({super.key});
#override
Widget build(BuildContext context) {
final LayerLink _layerLink = LayerLink();
return Scaffold(
body: Column(
children: [
Stack(
children: [
Align(
child: CompositedTransformTarget(
link: _layerLink,
child: Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
),
),
CompositedTransformFollower(
link: _layerLink,
targetAnchor: Alignment.centerRight,
followerAnchor: Alignment.centerLeft,
child: Container(
color: Colors.cyanAccent,
width: 12,
height: 12,
alignment: Alignment.center,
child: Text("*"),
),
),
],
)
],
),
);
}
}
There are few tricks I can think of,
You can use Stack widget with Position.
including another widget on right by applying opacity(invisible) on current snippet.
using transform will be handle if you know the width of the widget.
Transform.translate(
offset: Offset(20 / 2, 0), //20 is the * box size
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
Container(
color: Colors.green,
width: 20,
height: 20,
child: Center(child: Text("*")),
),
],
),
),
Place text and second widget inside row then put the row inside container with alignment center and use SizedBox for spacing between widget instead of Padding Widget.
Container(
color: Colors.green,
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text("Text"),
SizedBox(width: 10),
Text("*"),
],
),
);
Below is a simple view of my code. It has two stack elements and both contain clickable content. the top element covers the bottom element, I can't click on the bottom element. what should I do?
`
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
///decoration
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth,
child: Stack(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.3,
///decoration
///child: content
///THIS IS FIXED CONTENT. LIKE AN 'HEADER'
///clickable contents here
),
SingleChildScrollView(
child: Container(
margin: EdgeInsets.only(top: SizeConfig.screenHeight! * 0.25),
constraints: BoxConstraints(
minHeight: SizeConfig.screenHeight! * 0.75,
maxHeight: double.infinity,
),
///decoration and child, content
///THIS IS CONTENT SIDE FOR PAGE.
///this is scrollable and when scrolling up it goes above the header, continues up
///looks like DraggableScrollableSheet
//////clickable contents here
),
)
],
),
),
),
);
}
`
IgnorePointer, AbsorbPointer etc. i tryed but i cant solve it.
thats my workaround below. its background for flexibleSpace of CustomScrollView Appbar.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
//color: HTKColors.the_green_color,
///decoration
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth,
child: Stack(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.3,
///decoration
),
CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: SizeConfig.screenHeight! * 0.25,
backgroundColor: Colors.transparent,
leading: const SizedBox(),
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.none,
background: SizedBox(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.25,
///my bottom element (header)
),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
constraints: BoxConstraints(
minHeight: SizeConfig.screenHeight! * 0.75,
maxHeight: double.infinity,
),
///draggable top element
),
]),
),
],
),
],
),
),
),
);
}
This is exactly what I want:
The green area can reach infinite length and can be scrolled. when i scroll up should be able to go above the red area. and if I didn't scroll the green area and I can see the red area; I should be able to click on the elements in the red area.
sample code here:
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Column(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.25,
color: Colors.red,
///clickable elements here
),
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.75,
color: Colors.transparent
),
],
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.25,
color: Colors.transparent,
),
Container(
width: SizeConfig.screenWidth,
constraints: BoxConstraints(
minHeight: SizeConfig.screenHeight! * 0.75,
maxHeight: double.infinity,
),
///this elemend can be infinitely long by content
color: Colors.green
///clickable elements here
),
],
),
),
],
),
),
);
}
#eamirho3in
I have a Container widget inside a Wrap widget, and I want the Container to have the maximum width inside the Wrap, but when I use width: double.infinity for the width of the Container, it throws an error. How can I achieve my target? The code is below:
Container(
width: 150,
color: Colors.grey.shade300,
child: Wrap(
direction: Axis.vertical,
children: [
Text("Hi there!"),
Text("This is a very long long string to show!"),
Container(
color: Colors.teal,
height: 5,
width: double.infinity,
),
Text("The end."),
],
),
),
Use a row to get full width
Container(
width: 150,
color: Colors.grey.shade300,
child: Wrap(
direction: Axis.vertical,
children: [
Text("Hi there!"),
Text("This is a very long long string to show!"),
Row(
children: [
Container(
color: Colors.teal,
height: 5,
),
]),
Text("The end."),
],
),
),
You've define the top level width, To have the same width, you can just put it inside the container instead of adding widgets. like
Container(
width: 150, //from here
color: Colors.grey.shade300,
child: Wrap(
direction: Axis.vertical,
children: [
Text("Hi there!"),
Text("This is a very long long string to show!"),
Container(
color: Colors.teal,
height: 5,
width: 150, //to here
),
Text("The end."),
],
),
),
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'm trying to do my first flutter web page.
I want make navigation app bar on the top and scrollable area with pictures and text below.
And I have a problem with renering my page. Body of my page is not scrolling and it overflows at the bottom. What I'm doing wrong?
Here is my sample code:
#override
Widget build(BuildContext context) {
return Column(
children: [
TopBar(),
SingleChildScrollView(
child: Column(
children: [
Container(
height: 300,
color: Colors.red,
),
Container(
height: 300,
color: Colors.green,
),
Container(
height: 300,
color: Colors.black,
)
],
),
)
],
);
}
}
You can combine Column and ListView like:
#override
Widget build(BuildContext context) {
return Column(
children: [
AppBar(),
Expanded(
child: ListView(
children: [
Container(
height: 300,
color: Colors.red,
),
Container(
height: 300,
color: Colors.green,
),
Container(
height: 300,
color: Colors.black,
)
],
),
),
],
);
}