I have made PageView, set physics to NeverScrollableScrollPhysics to disabled scroll and implements it by buttons. But when I call controller.animateToPage(/* ... */), my PageView animated with scroll glow. How to disabled this behaviour? Or this is bug of Flutter itself?
To disable Scroll glow, create a class that extends ScrollBehavior
class DisableScrollGlowBehavior extends ScrollBehavior {
#override
Widget buildViewportChrome(
BuildContext context, Widget child, AxisDirection axisDirection) {
return child;
}
}
Then wrap your scrollable List widget with ScrollConfiguration widget using the behavior of the class created.
ScrollConfiguration(
behavior: DisableScrollGlowBehavior(),
child: ListView(
children: [],
),
)
Related
I have a Flutter scrolling GridView builder that looks like it renders the ListTiles below the Container the GridView is placed in. It appears it renders placeholder grid list tiles even when they are not within the Container bounds.
It looks like for some reason that the GridView ListTiles appear outside (below) the parent container.
In this example the GridView is placed within a Container that is then placed as a child under a parent Scrollbar that is a child widget in a Column. The GridView appears to render the grid ListTiles (renders the background Tile color but not the Tile contents) outside its parent container, appearing as Tiles under the other child widgets of the parent Column widget. See screen grabs below.
Grid List tiles under the Container
When I scroll the list up the shadow Tiles appear in the GridView with the Tile contents.
When I scroll back the Tiles below the GridView appear below?/under? the other widgets in the parent Column. See first image the colored area under the "Bye" text widget.
`
import 'package:flutter/material.dart';
import 'package:scroll5/models/task_model.dart';
/// This is the stateful widget that the main application instantiates.
class ScrollListWidget extends StatefulWidget {
final List<TaskCard> _list;
ScrollListWidget({Key? key})
: _list = [],
super(key: key);
const ScrollListWidget.withList(
List<TaskCard> list, {
Key? key,
}) : _list = list,
super(key: key);
#override
State<ScrollListWidget> createState() => _ScrollListStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _ScrollListStatefulWidgetState extends State<ScrollListWidget> {
#override
Widget build(BuildContext context) {
return Container(height: 240, child: GridView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: widget._list.length,
itemBuilder: (context, index) => WordTile(
widget._list[index].taskName(), widget._list[index].daysEffort()),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 4,
),
));
}
}
class WordTile extends StatelessWidget {
final String word;
final int score;
const WordTile(this.word, this.score, {super.key});
#override
Widget build(BuildContext context) {
return ListTile(
tileColor: Colors.green.withOpacity(.4), title: Text(word));
}
}`
GridView within a Container contained within a Scrollbar and Column
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:
Column(children: [
Scrollbar(
controller: _scrollController,
thickness: 8,
interactive: true,
thumbVisibility: true,
child:ScrollListWidget.withList(_taskList)
),
Text("Bye",style: TextStyle())])),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add)));
// This trailing comma makes auto-formatting nicer for build methods.
}`
Here is my problem.
I would like that by dragging progressively (with my finger for example) up a container (Container) that this one moves following the movement but that a new page (NewPage) towards which I want to navigate is supperposed on the container while following the movement until a certain level when I release, that the page takes all the screen. (Let's say I want to do a Navigator.push but in this sense).
Thank you.
class NewPage extends StatelessWidget {
...
#override
Widget build(BuildContext context) {
return Scaffold(...);
}
}
...
class _MainPageState extends State<MainPage> {
...
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
...
GestureDetector(
child: Positioned(
...
child: Container()
)
)
]
)
);
}
}
Your question is a bit unclear. But try these different navigation techniques.
Hero Animations
PageView - Try this with scrollDirection: Axis.vertical
I have a container with a column inside it and its wrapped with a SingleChildScrollView widget.
I want to disable this scroll splash animation that comes when we reach the end of the scroll view.
This is what my widget tree looks like for this one.
Container - with rounded border
|
SingleChildScrollView
|
Column
|
Some widgets in children
Because this comes over the rounded border of the container I want to disable it.
Apoorv, google has many solutions to this question, please check this page for a solution to your problem.
try the following
MaterialApp(
builder: (context, child) {
return ScrollConfiguration(
behavior: MyBehavior(),
child: child,
);
},
home: new MyHomePage(),
);
and define custom scroll behavior like this
class MyBehavior extends ScrollBehavior {
#override
Widget buildViewportChrome(
BuildContext context, Widget child, AxisDirection axisDirection) {
return child;
}
}
I am trying to implement a Scroll Widget in Flutter but not able to implement it.
I saw many tutorials but they have implemented scroll widget with ListView or Grid View.
In my case, I have Register page with multiple Text Inputs and Buttons. In this case, my page is not scrolling down please help someone.
div{
Scroll Widget on the Register page.
}
like this
class ExampleScroll extends StatefulWidget {
#override
_ExampleScrollState createState() => _ExampleScrollState();
}
class _ExampleScrollState extends State<ExampleScroll> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(),
),
);
}
}
Please wrap with a SingleChildScrollView Widget.
Like this...
class AppDashBoard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: Text('It Scrollable'),
),
);
}
}
You can use SingleChildScrollView for scrolling like this.
SingleChildScrollView(
child:Column(...)
)
You can use SingleChildScrollView and provide scrolling contents as its child
for more you can find on the documentation
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
Eg:
SingleChildScrollView(
// scrollable contents as child
child:Column(...)
)
By default, flutter adds a overscroll effect on ListView/GridView/... on ios
I would like to remove this effect entirely or on one specific scrollable.
What can I do ?
You don't need to do those fancy stuff if you only want to remove overscroll behavior on iOS. Simply, use:
ListView(
physics: ClampingScrollPhysics(),
)
I found this answer (https://stackoverflow.com/a/51119796/5869913) and just added information about deleting overscroll effect.
The overscroll effect comes from BouncingScrollPhysics added by ScrollBehavior
To remove this effect, you need to specify a custom ScrollBehavior and override getScrollPhysics method. For that, simply wrap any given part of your application into a ScrollConfiguration with the desired ScrollBehavior.
The following ScrollBehavior will remove the overscroll effect entirely :
class MyBehavior extends ScrollBehavior {
#override
ScrollPhysics getScrollPhysics(BuildContext context) => ClampingScrollPhysics();
}
You can also remove glow effect with override of method buildViewportChrome like this:
#override
Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) => child;
To remove the overscroll on the whole application, you can add it right under MaterialApp :
MaterialApp(
builder: (context, child) {
return ScrollConfiguration(
behavior: MyBehavior(),
child: child,
);
},
home: MyHomePage(),
);
To remove it on a specific ListView, instead wrap only the desired ListView :
ScrollConfiguration(
behavior: MyBehavior(),
child: ListView(
...
),
)
or just set physics: ClampingScrollPhysics() in the ListView