I am learning Flutter, so if my question is a dumb question, please don't throw me a stone :p :D
First, some of the following images might be familiar to you, I am only using this app from github, to test the teory. Source: https://www.youtube.com/watch?v=sgfMdhV4HQI&t=370s
My Question:
I am using pageview to navigate between two pages one with some dragable containers, and another page with some more dragable containers that represent a different topic.
If I define the scrollDirection: Axis.horizontal, it work quit fine. But I want to drag it vertically.
If I define scrollDirection: Axis.vertical, I realised that, I only have a small portion of the screen where I am able to drag the page.
To my understanding, it might be related with the containers.
How can I drag vertically, while touching any where on the screen?
Note: I also tested the SliverToBoxAdapter class without good results.
my git repro https://github.com/engineerRFR/flutter-mytest
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Netflix UI Redesign',
debugShowCheckedModeBanner: false,
home: PageView(
children: <Widget>[
Container(
color: Colors.pink,
child: HomeScreen(),
),
Container(
color: Colors.cyan,
child: photoGallery(),
),
Container(
color: Colors.deepPurple,
),
],
scrollDirection: Axis.horizontal,
onPageChanged: (num) {
print("Page number : " + num.toString());
},
),
);
}
}
photoGallery (){
return PageView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
color: Colors.amber,
)
,
Referring to our comments and as I was suspecting, the root of this problem is not your PageView.
If you check your home_screen.dart, the body of your Scaffold (line 121) is a ListView. If you change it to Column everything starts to work as you want!
And that's because ListView consumes all of the vertical scrolls and the event won't reach the outer PageView.
Related
This question already has answers here:
Horizontal ListView flutter WITHOUT explicit height
(2 answers)
Closed 6 months ago.
I made list view with horizontal scrolling. And it is not working with out setting an height.
My code is
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(""),
),
body: Column(
children: [
Container(
height: 100,
color: Colors.red,
child: ListView.builder(
itemCount: 5,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.amberAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("$index"),
),
);
}),
),
const Expanded(child: Text("Some other views")),
],
),
),
);
}
}
How can I leave the listview height as wrap content?
That's one of the things you will have to live with. If there is a list of 1 million items and each one is wrap_content and somehow one of the list item is going to be 1000px in height, flutter has no way of knowing this as it only lays out items which are going to be visible (or has potential to be visible on user interaction immediately). It doesn't build all the million items at once so we need to provide some height.
This is true for vertical lists as well. We usually don't pay attention as most apps in portrait mode have not much width so it matches parent's width without any issue.
I have a relatively complex Listview setup, where one Listview acts as a scrolling parent of a horizontal Listview, which acts as a parent to a third vertical Listview.
Here is an image of the general idea of the layout: https://cdn.discordapp.com/attachments/752981111738466467/895739370227773480/IMG_20211007_142732.jpg.
I'm having trouble getting the middle Listview, the horizontal Listview (marked 2 in the image), to scroll.
ConstrainedBox(
constraints: BoxConstraints(...),
child: ListView.builder( // This is Listview 1
controller: ScrollController(),
itemCount: itemCount,
itemBuilder: (context, worldIndex) {
return ConstrainedBox(
constraints: BoxConstraints(...),
child: ListView.builder( // This is Listview 2
controller: ScrollController(),
itemCount: ...,
scrollDirection: Axis
.horizontal, // grows horizontally to show the hierarchy of one card (the card selected in the hierarchy above it, or for the first level, the world) to its children
itemBuilder: (context, index) {
...
return ConstrainedBox(
constraints: BoxConstraints(...),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
decoration: ...,
),
child: ListView.builder( // This is Listview 3
controller: ScrollController(),
itemCount: getNumChildren(index),
itemBuilder: (context, index2) {
return ...;
}),
)));
}));
}));
For brevity, I have removed several parts of my code and replaced them with elipses. I don't think it is likely that any of these areas could cause any issues with the Listview, but please let me know if they could.
Edit: The code I have already works properly, aside from the horizontal Listview not scrolling. My solution needs to have a dynamically expandable Listview at each level of the tree (1, 2, and 3, in the image, for example). The primary target platform for this is Windows.
I'm assuming the issue involves a problem with which Listview wins the GestureArena, but I am currently at a loss in how to work around that issue, providing a way to scroll all of available Listviews.
Thank you in advance, and I hope you have a great day!
As I could understand it. Maybe you are looking for something like this? I have commented the 3 types of scrolls you need. If anything is not as expected, please mention.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
for (var i = 0; i < 5; i++)
// One big section in the largest col (1).
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 200.0,
child: ListView.builder(
// Horizontal item builder. (2)
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return SingleChildScrollView(
child: Column(
// Inside one vertical section. (3)
children: [
for (var i = 0; i < 5; i++)
ElevatedButton(
onPressed: () {}, child: Text("OK")),
],
),
);
},
),
),
],
),
],
),
),
),
),
);
}
The solution to this turned out to be that Flutter has intentionally turned off the ability to scroll horizontally using both scroll wheel and dragging for Windows (or at least, that's what seems to be the case according to what I was able to find in this issue).
To solve that, they have made a migration guide here.
Following the guide, it is extremely simple to override the drag devices used in order to re-enable the intended drag scrolling. This still does not enable scrolling horizontally with a mouse wheel, but for my code that is not an issue.
class CustomScrollBehavior extends MaterialScrollBehavior { // A custom scroll behavior allows setting whichever input device types that we want, and in this case, we want mouse and touch support.
#override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.mouse,
PointerDeviceKind.touch,
};
}
Then, in the actual Listview's code, we set a ScrollConfiguration with this new class as its behavior.
ScrollConfiguration(
behavior: CustomScrollBehavior(),
child: Listview.Builder(
controller: ScrollController(),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
...
})
I have a TabBarview when slide from one page to another splash appear in the very side of the page.
I don't want the splash highlight to appear on both sides.
Although tabbarview has physics and when set to bouncingscrollphysics() this shape shouldnt appear, like what occur in list view, but nothing changed.
Tried another solution: I wrapped the tabbarview with a theme and changed the highlight color and splash color to colors.transparent but that didn't work either. Here is the code for my TabBarview.
and here is the ui, and how it looks.
Theme(
data: new ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: TabBarView(
physics: BouncingScrollPhysics(),
controller: _controller,
children: model.types.map((String type) {
List<Subscription> subssOfThisType =
model.historySubscription.where((Subscription sub) {
return sub.package.name == type;
}).toList();
final cards = subssOfThisType.map(
(s) {
return HistoryCard(
sub: s,
);
},
).toList();
return ListView(
physics: BouncingScrollPhysics(),
padding:
EdgeInsets.symmetric(horizontal: 14, vertical: 8),
children: cards ?? Container(),
);
}).toList(),
),
)
If you don't want to make some breaking changes in the original code of TabBar hten use the below package
https://pub.dev/packages/flutter_tab_bar_no_ripple
=== For your use case ===
To keep things simple ... change physics to BouncingScrollPhysics()
If you don't want that bouncy effect then check the link below
https://stackoverflow.com/a/51119796/10104608
change physics to BouncingScrollPhysics()
Would you like to try ScrollConfiguration?
it works fine.
body: ScrollConfiguration(
behavior: MyBehavior(),
child: const TabBarView(
children: [
TabPage(icon: Icons.directions_car),
TabPage(icon: Icons.directions_bike),
],
),
),
class MyBehavior extends ScrollBehavior {
#override
Widget buildViewportChrome(
BuildContext context, Widget child, AxisDirection axisDirection) {
return child;
}
}
https://stackoverflow.com/a/51119796/9819094
I'm trying to achieve a scrollable List with videos. I'm using the video_player widget and wrapping the player in a Card with a simple button.
Now i noticed that whenever I use ListView.builder with videos in the list, it is extremely lagging, especially when scrolling back up. i'm posting a GiF bellow if you would like to see the behaviour.
I have this problem ONLY when I have Videos in the list.
If I replace the videos with a simple Image widget, the scrolling is smooth and runs as intended. (Also provided a GiF below)
When I scroll through the list I get this message in my Console:
flutter: Another exception was thrown: setState() or markNeedsBuild() called during build.
And I think (but not sure) that this is the cause of the problem, maybe the way I implemented the video_player plugin (?)
class VideoPlayPause extends StatefulWidget {
VideoPlayPause(this.controller);
final VideoPlayerController controller;
#override
_VideoPlayPauseState createState() => _VideoPlayPauseState();
}
class _VideoPlayPauseState extends State<VideoPlayPause> {
//This Part here
_VideoPlayPauseState() {
listener = () {
setState(() {});
};
}
Maybe its setting state every time I scroll ?
I tried flutter run --release but saw no difference at all.
I'm running the app on a physical Iphone X.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MVP_Test1'),
),
body: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: videoUrl.length,
itemBuilder: (context, i) {
return Card(
child: Column(
children: <Widget>[
Column(
children: <Widget>[
const ListTile(
leading: Icon(Icons.live_tv),
title: Text("Nature"),
),
Stack(
alignment: FractionalOffset.bottomRight +
const FractionalOffset(-0.1, -0.1),
children: <Widget>[
// If I replace this with Image.asset("..."), the scrolling is very smooth.
AssetPlayerLifeCycle(
videoUrl[i],
(BuildContext context,
VideoPlayerController controller) =>
AspectRatioVideo(controller)),
]),
],
),
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
FlatButton(
child: const Text('ADD VIDEO'),
onPressed: () {
/* ... */
},
),
],
),
),
],
),
);
},
),
);
}
Result when I run Flutter Analyze
flutter analyze
Analyzing mvp_1...
No issues found! (ran in 1.9s)
You can see how when scrolling back up it looks like the app is skipping frames or something. Here's a video:
https://giphy.com/gifs/u48BNQ13r15Zay5SnN
Here's a video with photos instead of videos:
https://giphy.com/gifs/236RKyA8y1pfecmR1d
I'm having a weird issue with Flutter and the ListView widget. I can see a gap between my items. I can see the black background. Is there something I'm missing so that these gaps does not show? Here is the whole application code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: Container(
color: Colors.black,
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
color: Colors.pink.shade100,
child: Container(
height: 100.0,
),
);
},
itemCount: 100,
),
),
);
}
}
Notice how the gaps are not always visible and change while scrolling.
I tried running your code but I didn't got any unexpected padding between List items. I'm currently on Flutter 2.5
You can try adding padding 0 on your ListView and see if it removes the unexpected padding.
child: ListView.builder(
padding: EdgeInsets.all(0.0),
...
),
I had the same issue, where the line would appear on the end of list view thus showing divider in last two Childs of the ListView.
Solutions I tried was :
setting padding of ListView as zero
setting addRepaintBoundary as false
(spoiler alert) both didn't work.
If all the children of list view are of same color, then wrap you ListView with container and set the color of the container to the color of list child. It will hide the lines.