Related
I am making an application where you can edit the profile picture and I want to scroll only when I click on a piece of the screen.
The screen as you see in the picture is divided 50 - 50, the top part is the profile picture, and inside it you can move to select the part that is inside the circle (you can also zoom).
The lower part is the gallery with the latest photos.
Example
What I want to do, is that if I click on the upper part, it does not scroll, it simply works with the zoom that already has that widget. And if I click in the inferior part, I want that a complete zoom is done, that is to say that it raises the whole screen, including the profile photo.
My code is the following:
CustomScrollView(
slivers: [
SliverToBoxAdapter(child: SizedBox(
height: maxHeight,
child: Stack(
children: [
Positioned(
top: 0.1,
child: SizedBox(
height: maxHeight,
width: Sizes.width,
child: Stack(children: [
Positioned.fill(
child: PhotoView(
backgroundDecoration: BoxDecoration(color: Colors.transparent),
minScale: PhotoViewComputedScale.covered,
onScaleEnd: (c, details, controllerValue) {
},
enableRotation: false,
imageProvider: NetworkImage(
'https://i.stack.imgur.com/lkd0a.png',
),
),
),
]),
),
),
IgnorePointer(
child: ClipPath(
clipper: InvertedCircleClipper(),
child: Container(
color: Colors.black.withOpacity(0.3),
)),
),
],
)))),
SliverPadding(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
sliver: SliverToBoxAdapter(
child: Row(children: [
Text(
'gallery'.tr,
),
Icon(Icons.keyboard_arrow_down_rounded)
]),
)),
SliverPadding(
padding: edgeInsets,
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
delegate: SliverChildBuilderDelegate((context, index) {
final image = localImages[index];
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: FadeInImage(
width: 400,
height: 400,
placeholder: MemoryImage(kTransparentImage),
image: DeviceImage(image, size: const Size(400, 400), quality: 90),
fit: BoxFit.cover,
),
);
},
childCount: localImages.length),
)
],
),
How can I do it? Thank you.
I want to achieve scrolling inside the list view in flutter.But the entire screen is scrolling here.Tried wrapping listview inside container and then in single child scroll view but that also doesnt work
[1]: https://i.stack.imgur.com/1K3q0.png
Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: double.maxFinite,
// padding: const EdgeInsets.only(left: 8.0, right: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Card(
elevation: 15,
child: Container()
//DashboardAppbar(emp: loggedinEmpDetails),
),
),
const SizedBox(
height: 10,
),
selected == 0
? ListView(
// shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
children: [
leaves == null
? CircularProgressIndicator()
: DashboardCards(leaves!),
const SizedBox(
height: 10,
),
for (int i = 0; i < userLeaves!.length; i++)
dashboardLeaveCards(
emp: employee![0],
userLeaves: userLeaves![i],
selected: selected,
leaveReasons: leaveReason),
const SizedBox(
height: 5,
)
],
)
: Column(
You don't need to wrap with multiple scrollable widget, just wrap ListView with Expanded widget, and follow this widget structure.
body: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Card(elevation: 15, child: Container()
//DashboardAppbar(emp: loggedinEmpDetails),
),
),
const SizedBox(
height: 10,
),
selected == 0
? Expanded(
child: ListView(
children: [
// leaves == null
// ? CircularProgressIndicator()
// : DashboardCards(leaves!),
const SizedBox(
height: 10,
),
for (int i = 0; i < 4; i++)
Container(
height: 100,
),
const SizedBox(
height: 5,
)
],
),
)
: SingleChildScrollView(
child: Column(
children: [],
),
)
],
),
);
Add physics and shrinkWrap to the list view
ListView(
shrinkWrap:true,
physics : NeverScrollableScrollPhysics(),
)
And remove the inner SingleChildScrollView to which you added physics..
Edit
Instead of listview use List.generate
Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: MediaQuery.of(context).size.height,
// padding: const EdgeInsets.only(left: 8.0, right: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Card(
elevation: 15,
child: Container()
//DashboardAppbar(emp: loggedinEmpDetails),
),
),
const SizedBox(
height: 10,
),
selected == 0
? Expanded(
child:ListView(
shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
children: [
leaves == null
? CircularProgressIndicator()
: DashboardCards(leaves!),
const SizedBox(
height: 10,
),
for (int i = 0; i < userLeaves!.length; i++)
dashboardLeaveCards(
emp: employee![0],
userLeaves: userLeaves![i],
selected: selected,
leaveReasons: leaveReason),
const SizedBox(
height: 5,
)
],
)
: Column(
mainAxisSize: MainAxisSize.min,
)
)
I am trying to nest the ListView in a Listview as per the below code, the Listview on top is scrolling horizontally and the nested ListView is scrolling vertically . for the nested ListView I am facing the error of
Viewports expand in the cross axis to fill their container and
constrain their children to match their extent in the cross axis. In
this case, a vertical viewport was given an unlimited amount of
horizontal space in which to expand.
How should I resolve it so that the Nested View is also shown in the below code?
new Container(
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
ListView(
scrollDirection:Axis.vertical,
children: <Widget>[new Container(
padding: EdgeInsets.fromLTRB(10, 20,10, 0),
width: screenSize.width,
child: new Column(
children: <Widget>[
Column(children: <Widget>[
Row(children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
],),
new Container(
//ERROR POINT
child: new ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
new Container(
color: Colors.red,
width: screenSize.width,
child: new Center(
child: new Text(
'RED',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
),
new Container(
color: Colors.blue,
width: screenSize.width,
child: new Center(
child: new Text(
'BLUE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
),
new Container(
color: Colors.orange,
width: screenSize.width,
child: new Center(
child: new Text(
'ORANGE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
)
],
),
)
],
),
),],
),
new Container(
color: Colors.blue,
width: screenSize.width,
child: new Center(
child: new Text(
'BLUE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
),
new Container(
color: Colors.orange,
width: screenSize.width,
child: new Center(
child: new Text(
'ORANGE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
)
],
),
)
DO NOT wrap widgets with an empty Container
For nested ListView you have to constrain its width via either SizedBox or Container, like so:
ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
child: ListView(
children: [
Text('data'),
Text('data'),
Text('data'),
],
),
width: 300,
),
SizedBox(
child: ListView(
children: [
Text('data'),
Text('data'),
Text('data'),
],
),
width: 300,
),
SizedBox(
child: ListView(
children: [
Text('data'),
Text('data'),
Text('data'),
],
),
width: 300,
),
],
)
If you want to keep all nested scroll views positions you could wrap them in a SingleChildScrollView with Row, but it seems something is not quite right in your decision
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: 200,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 200,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 300,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 300,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 300,
child: ListView.builder(itemBuilder: (context, index) => Text('data $index'), itemCount: 200),
),
SizedBox(
width: 300,
child: ListView.builder(itemBuilder: (context, index) => Text('data $index'), itemCount: 200),
),
],
),
)
I want to create a ListView and a Button to add items to the ListView.
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
Conversation conversation = teamMembers[index];
return SizedBox(
width: 42,
height: 42,
child: Avatar(
name: member.name,
profileUrl: member.profileUrl,
radius: 38,
),
);
},
itemCount: teamMembers.length,
),
),
InkWell(
onTap: () {
_showSheet();
},
child: Container(
width: 42,
height: 42,
decoration: new BoxDecoration(
color: Color(0xfff2f2f2),
borderRadius: BorderRadius.circular(28)),
child: Icon(Icons.add),
),
),
],
)
I'm getting the results as below for lesser number of items and more number of items. How can I make the + button closer to the ListView even if the list length is less.
List<Widget> _buttons = [];
Wrap(
spacing: 12.0, // horiz
runSpacing: 12.0, // vert
crossAxisAlignment: WrapCrossAlignment.start,
alignment: WrapAlignment.start,
children: _buttons,
),
The solution to this issue is replacing the Expanded widget with Flexible widget.
Expanded actually is just a shorthand for Flexible. Flexible takes only the needed space, and Expanded takes all available space, respecting the flex factor.
Flexible with fit: FlexFit.loose which is the default one solves the problem. If the fit is FlexFit.loose, the child can be at most as large as the available space (but is allowed to be smaller)
So,
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
Conversation conversation = teamMembers[index];
return SizedBox(
width: 42,
height: 42,
child: Avatar(
name: member.name,
profileUrl: member.profileUrl,
radius: 38,
),
);
},
itemCount: teamMembers.length,
),
),
InkWell(
onTap: () {
_showSheet();
},
child: Container(
width: 42,
height: 42,
decoration: new BoxDecoration(
color: Color(0xfff2f2f2),
borderRadius: BorderRadius.circular(28)),
child: Icon(Icons.add),
),
),
],
)
is the solution.
I'm creating a notification center for my application, and it contains a bit of long strings for the title and the body, and it always causes overflow, I've tried using Expanded widgets, and these following stack over flow questions: Question 1, Question 2 But I cannot apply it to my code, here is what it looks like right now:
I get the text from my firebase cloud firestore, and I'm outputting the texts using a listview.
The title text is this: "Allen Indefenzo has rescinded consent for you to access his/her data"
The body text is this : "He/she has removed all your access and you will no longer be able to view / change his data, to have access again ask for the user to give you his/her special code again."
Here is my code:
Container(
color: Colors.white,
child: StreamBuilder(
stream: db
.collection('users')
.document(userData.userID)
.collection('notifications')
.snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.data.documents.length != 0) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(
snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
),
),
Column(
children: <Widget>[
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['title']),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['body']),
),
],
),
],
),
);
},
);
}
},
),
),
Any help is appreciated and if you can explain it would be amazing! Thank you so much!
try to wrap your Column inside Expanded,
Container(
child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLBtBU3nUOK7osT41ZsQhP4VBV7fd9euqXvXVKQH0Q7bl4txeD'),
fit: BoxFit.contain,
),
),
Expanded(
child: Column(
children: <Widget>[
Text(
'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
Text(
'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
],
),
),
],
),
);
output:
Additionally if you want to limit lines of Text use,
Text(
'Reallly looooooooooooooooooooooooooooooongtextttttttttttttttttttttttttttttttttttttttttttttttt',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Output:
Just wrap your column inside expanded widget
Expanded(child:
Column(
children: <Widget>[
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['title']),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['body']),
),
],
),
),
Expanded widget is useful when you want to fill all the remaining space when a column or row widget have 2 or more child widgets. so wrapping a child inside an expanded widget will fill up the remaining space accordingly.
return Container(child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
),
),
new Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TitleText(
text:snapshot.data.documents[index]['title'] ,
maxLine: 5,
),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child: TitleText(
text:snapshot.data.documents[index]['body']),
),
],
),
),
],
),
);