I want to do my interface like the image I show. I want to display the image the put a container to over the image. Now I have a problem with the ListTile I want to show did not come out.
Here is my code:
Scaffold(
appBar: AppBar(
title: Text('Detail'),
),
body: Column(children: <Widget>[
Expanded(
child:
Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40)),),
child: Image.assets('images/photo.png'),
),
Container(
margin: EdgeInsets.only(top: 170),
child: Stack(alignment: Alignment.topCenter, children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40)),
color: Colors.white),
)
],
),
),
Positioned(top: 200, left: 8,
child: Column(children: <Widget>[
ListTile(title: Text('Title'), subtitle: Text(''),)
],)
)
],
),
)
],)
);
Anyone can help me?
when scrolling inside Positioned widget you have to give all the positions and scroll direction in listview
Positioned(
top: 190,
bottom: 0,
right: 0,
left: 0,
child: SizedBox(
child: Container(
width: MediaQuery.of(context).size.width,
// height: MediaQuery.of(context).size.height- 190,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft:Radius.circular(20), topRight:Radius.circular(20)) ),
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: 20,
itemBuilder: (BuildContext context, int index){
return ListTile(title: Text("Title $index"),);
},
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
) ,),
),
)
Replace you code like this
return Scaffold(
appBar: AppBar(
title: Text("title text"),),
body: Stack(children: <Widget>[
Positioned(
top: 0,
child: Image.network("https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg",
fit: BoxFit.cover,
height: 200,
width: MediaQuery.of(context).size.width,
),
),
Positioned(
top: 190,
child: Container(
width: MediaQuery.of(context).size.width,
height: 600,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft:Radius.circular(20), topRight:Radius.circular(20)) ),
child: ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(title: Text("Title 1"),),
ListTile(title: Text("Title 1"),),
ListTile(title: Text("Title 1"),),
],) ,),
)
],),
);
Related
i tried to use listViewSeparated on a Widget along a row with scrolling but it doesn't show anything like its only a Scaffold (white page) i don't know what is the problem
Here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/cubit/cubit.dart';
import '../../layout/cubit/states.dart';
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocConsumer<LifeStyleCubit, LifeStates>(
listener: (context, state) {},
builder: (context, state) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
ListView.separated(
shrinkWrap: true,
itemBuilder: (context,index) =>SpecialProgramWidget(),
separatorBuilder: (context,index) => SizedBox(width: 20,),
itemCount: 3
),
],
),
),
],
),
),
),
);
},
);
}
Widget SpecialProgramWidget() => Container(
width: 310,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
Stack(
alignment: Alignment.bottomRight,
children: [
Container(
height: 230,
width: 310,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
image: DecorationImage(
image: NetworkImage(
'https://i.pinimg.com/564x/20/bd/68/20bd68b5a248bb191178bd9b98b53a76.jpg'),
fit: BoxFit.cover)),
),
Align(
alignment: Alignment.topLeft,
child: Container(
height: 230,
width: 290,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://www.pngplay.com/wp-content/uploads/6/Fitness-PNG-HD-Quality.png'),
fit: BoxFit.cover)),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Special Program',
style: TextStyle(fontSize: 21, color: Colors.white),
),
)
],
),
Container(
width: 310,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
border: Border.all(color: Colors.grey.shade400, width: 1),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Super pump biceps workout',
style: TextStyle(
fontSize: 15,
),
)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'6 Weeks',
style: TextStyle(fontSize: 15, color: Colors.grey),
)),
),
],
),
)
],
),
);
}
i need my screen displayed like this
return Scaffold(
body: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SpecialProgramWidget(),
SizedBox(width: 20,),
SpecialProgramWidget(),
SizedBox(width: 20,),
SpecialProgramWidget()
],
),
),
],
)
);
Which it displays the widget along a row... i wanted to do the same thing with ListViewSeparated but i only got White page with no data
i tried some solutions like wrapping Expanded widget on ListViewSeparated but still doesn't work
how can i solve this ?
The issue is on scrollDirection: Axis.horizontal,. Also you dont need to use ListView.separated( inside SingleChildScrolView, the parent is already handling the scroll event.
You can provide fixed with ListView.separated to bypass the issue,
Widget build(BuildContext context) {
// return
// BlocConsumer<LifeStyleCubit, LifeStates>(
// listener: (context, state) {},
// builder: (context, state) {
return Scaffold(
body: LayoutBuilder(
builder: (_, constraints) => Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: constraints.maxWidth,
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (context, index) =>
SpecialProgramWidget(),
separatorBuilder: (context, index) =>
SizedBox(width: 20),
itemCount: 3,
),
),
],
),
),
],
),
),
),
),
// );
// },
);
}
A better decision will be using CustomScrolView I think it will be better for the thing you are trying to get.
i am working on this flutter app where i need to show the children in a grid view, so i used a column widget in side GridView.builder like shown below, i want to remove the sapcing where its marked in the red, and leave it to be responsive somehow...
GridView widget:
GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 450,
),
primary: false,
shrinkWrap: true,
padding: const EdgeInsets.only(
right: 25,
left: 25,
top: 20,
),
itemCount: data.length,
itemBuilder: (ctx, index) {
return VideoWidget(
oneVideoData: data[index],
);
},
),
VideoWidget:
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
...
),
child: Row(
children: [
...
],
),
),
Stack(
alignment: AlignmentDirectional.center,
children: [
_videoPlayerControllerFFrame.value.isInitialized
? AspectRatio(
aspectRatio:
_videoPlayerControllerFFrame.value.aspectRatio,
child: VideoPlayer(
_videoPlayerControllerFFrame,
),
)
: Container(
height: 250,
),
_isVideoLoading
? const CircularProgressIndicator(
color: Colors.yellow,
)
: IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return VideoPlayerWidget(
oneVideoData: widget.oneVideoData,
videoController: _videoPlayerController,
);
});
},
icon: Icon(
Icons.play_arrow,
color: Theme.of(context).colorScheme.tertiary,
size: 50,
),
),
],
),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
...
),
),
],
),
);
this a screen shot of the output:
i want to get rid of the red space in the bottom.
Thanks in advance
Try below code hope its help to you.
GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 5,
shadowColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10,
),
),
margin: EdgeInsets.all(5),
child: Container(
height: 200,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(2),
child: Row(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black,
width: 1.0,
),
),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
SizedBox(
width: 10,
),
Text('Person ${index.toString()}'),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
),
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
child: Text(
'Awesome Product From Person ${index.toString()}',
),
),
],
),
),
);
},
),
Result Screen->
may i ask how to force the top part of the screen not disappear when i scroll the listview down ?
as you can see here in this Photo
When i Scroll the ListView Down, then the top part, that contains the Player Widgets will disappear
so how can i please to force the Top Widgets to keep showing up when i scrolling down the Listview
Scaffold(
body: Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Center(
child: Container(
width: 200.0,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color:Color(0xff193451).withOpacity(.5),
shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(.0),
child: _buildRadialSeekBar(),
),
),
Center(
child: Container(
width: 150.0,
height: 150.0,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: ClipOval(
clipper: MClipper(),
child: Image.asset(
"assets/justine.jpg",
fit: BoxFit.cover,
),
),
),
),
)
],
),
),
),
Container(
// color: Colors.blue,
width: 350.0,
height: 100.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
height: 65.0,
width: 290.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff193451), width: 3.0),
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Row(
children: <Widget>[
Icon(Icons.fast_rewind,
size: 55.0, color: Color(0xff193451)),
Expanded(
child: Container(),
),
Icon(Icons.fast_forward,
size: 55.0, color: Color(0xff193451))
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 92.0,
height: 92.0,
decoration: BoxDecoration(
color: Color(0xff193451), shape: BoxShape.circle),
child: IconButton(
icon: Icon(
Icons.play_arrow,
size: 45.0,
color: Colors.white,
),
onPressed: () {},
),
),
)
],
),
),
ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: [
if(LocalUrl == "http://local") Container(child: ParseLocall(),),
if(LocalUrl == "http://music") Container(child: ParseMusicc(),),
if(LocalUrl == "http://talk") Container(child: ParseTalkk(),),
if(LocalUrl == "http://sports") Container(child: ParseSportss(),),
if(LocalUrl == "http://id=r0") Container(child: ParseByLocationn(),),
if(LocalUrl == "http://lang") Container(child: ParseLanguagess(),),
if(LocalUrl == "http://podcast") Container(child: ParseProdcastss(),),
],
),
],
),
));
Thanks in Advance
You can separate Justin part from your ListView and wrap them with a Column. Code needs some fixing still, but will be like that:
body: Container(
// Here is the Column!
child: Column(
children: [
// And here is the top part!
Center(
child: Container(
width: 200.0,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color:Color(0xff193451).withOpacity(.5),
shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(.0),
child: _buildRadialSeekBar(),
),
),
Center(
child: Container(
width: 150.0,
height: 150.0,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: ClipOval(
clipper: MClipper(),
child: Image.asset(
"assets/justine.jpg",
fit: BoxFit.cover,
),
),
),
),
)
],
),
),
),
ListView(
shrinkWrap: true,
children: <Widget>[
Container(
// color: Colors.blue,
width: 350.0,
height: 100.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
height: 65.0,
width: 290.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff193451), width: 3.0),
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Row(
children: <Widget>[
Icon(Icons.fast_rewind,
size: 55.0, color: Color(0xff193451)),
Expanded(
child: Container(),
),
Icon(Icons.fast_forward,
size: 55.0, color: Color(0xff193451))
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 92.0,
height: 92.0,
decoration: BoxDecoration(
color: Color(0xff193451), shape: BoxShape.circle),
child: IconButton(
icon: Icon(
Icons.play_arrow,
size: 45.0,
color: Colors.white,
),
onPressed: () {},
),
),
)
],
),
),
ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: [
if(LocalUrl == "http://local") Container(child: ParseLocall(),),
if(LocalUrl == "http://music") Container(child: ParseMusicc(),),
if(LocalUrl == "http://talk") Container(child: ParseTalkk(),),
if(LocalUrl == "http://sports") Container(child: ParseSportss(),),
if(LocalUrl == "http://id=r0") Container(child: ParseByLocationn(),),
if(LocalUrl == "http://lang") Container(child: ParseLanguagess(),),
if(LocalUrl == "http://podcast") Container(child: ParseProdcastss(),),
],
),
],
),
],
),
));
The ListView is not scrollable in this widget although I am using SingleChildScrollView as the body.
In order for me to scroll the widget, I should start scrolling from the very first part of the page which is the Stack inside the Column, if I try to scroll the ListView it is not Scrollable and it doesn't produce any errors like render box overflow.
body: SingleChildScrollView(
child: Container(
//height: MediaQuery.of(context).size.height,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF27233E),
Color(0xFF160F3C),
Color(0xFF1E1550),
Color(0xFF241A5B),
],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 210,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0),
),
color: Colors.transparent.withOpacity(0.2)),
width: MediaQuery.of(context).size.width,
child: Card(
color: Colors.orange,
shape: RoundedRectangleBorder(
side: BorderSide(),
borderRadius: (BorderRadius.only(
bottomRight: Radius.circular(25.0),
bottomLeft: Radius.circular(25.0)))),
child: Stack(
children: <Widget>[
//Title
Positioned.fill(
top: 20,
left: 20,
child: Align(
alignment: Alignment.topCenter,
child: Text(
"Day: $currentDay",
style: TextStyle(
color: Colors.white,
fontFamily: "Montserrat",
fontSize: 31,
fontWeight: FontWeight.w900),
),
),
),
Positioned.fill(
bottom: -17.0,
child: Align(
alignment: Alignment.centerRight,
child: Container(
padding: const EdgeInsets.only(right: 10.0),
child: Hero(
tag: 'assets/logos/biceps-icon.png',
child: Image(
image: AssetImage(
'assets/logos/biceps-icon.png'),
height: 150.0,
))),
),
),
Positioned.fill(
bottom: 50,
top: 20,
left: 20,
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
"${dayMap['day$currentDay']}",
style: TextStyle(
color: Colors.white,
fontFamily: "Montserrat",
fontSize: 20,
fontWeight: FontWeight.w900),
),
),
),
],
),
),
),
Container(
height: MediaQuery.of(context).size.height,
child: ListView.builder(
itemCount: dayMap["workout"].length,
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: (Card(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 3, color: Colors.indigo),
borderRadius:
(BorderRadius.circular(30))),
color: Colors.purpleAccent,
margin:
EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
child: ListTile(
leading: ClipOval(
child: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.transparent,
),
),
),
)));
}),
),
],
),
),
),
);
}
}
In your Listview.builder function, try changing the physics property to "NeverScrollableScrollPhysics()"
ListView.builder(
itemCount: dayMap["workout"].length,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Padding(
I have this design where the images i provide autoscroll everytime,it's working fine,but when i try to overlap with the textfield so the textfield should be in between of the image as Stacked ,i tried with stack,but the textfield doesn't move to top,there is the Screenshot what i am getting,please help me on this
This is what i am getting
Code
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 180,
width: double.infinity,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.asset(
'assets/images/banner1.jpeg',
width: double.infinity,
fit: BoxFit.fitWidth,
);
},
itemCount: 3,
pagination: new SwiperPagination(
margin: new EdgeInsets.only(right: 200, bottom: 20)),
control: new SwiperControl(),
autoplay: true,
),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 30, right: 30),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 4.0),
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
),
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 110,
width: size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
);
},
),
),
],
),
),
],
),
],
),
),
),
);
Currently, TextField is inside COlumn that's why it appears below the image, you have to remove that code and add in stack list,
Example:
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 180,
width: double.infinity,
child: new Image.asset(
'assets/images/image.jpg',
width: double.infinity,
fit: BoxFit.fitWidth,
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 110,
width: 40,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
);
},
),
),
],
),
),
],
),
Padding(
padding: EdgeInsets.only(left: 30, right: 30, top: 150),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 4.0),
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
),
),
),
],
),
),
),
);