user10033434
Reputation: 455
detecting sliding_up_panel movement in flutter
I'm trying to detect the overall movement of the panel in respect to the screen, not the movement inside the panel itself, so I can fade away the image when the panel moves up. And bring it back when the panel moves down.
So far I had no luck.
I tried to use GestureDetector onVerticalDragUpdate, but it didn't work either.
Thanks in advance...
Here's my code:-
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
// import 'dart:ui';
class ExamplePage extends StatefulWidget {
@override
_ExamplePageState createState() => _ExamplePageState();
}
class _ExamplePageState extends State<ExamplePage> {
double _panelHeightOpen;
@override
Widget build(BuildContext context){
_panelHeightOpen = MediaQuery.of(context).size.height * .80;
return Material(
child: Stack(
alignment: Alignment.topCenter,
children: [
_body(),
SlidingUpPanel(
maxHeight: _panelHeightOpen,
minHeight: 500,
parallaxEnabled: true,
parallaxOffset: 0.5,
panelBuilder: (sc) => _panel(sc),
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0))
),
/////////////////////////// Images Layer //////////////////////////////////////////
Positioned(
top: 50,
right: 10,
child: Image.asset(
'images/bag_1.png',
// height: 300,
// width: 300,
fit: BoxFit.fill,
)
)
]
)
);
}
Widget _panel(ScrollController sc){
if (sc.hasClients) {
if ((sc.position.userScrollDirection == ScrollDirection.forward){
print("forward");
}
else if ((sc.position.userScrollDirection == ScrollDirection.reverse){
print("reverse");
}
}
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(
controller: sc,
children: [
Container(
padding: EdgeInsets.only(top: 70),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0))
)
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_button("Popular", Icons.favorite, Colors.blue),
_button("Food", Icons.restaurant, Colors.red),
_button("Events", Icons.event, Colors.amber),
_button("More", Icons.more_horiz, Colors.green),
]
),
SizedBox(height: 36.0),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Images", style: TextStyle(fontWeight: FontWeight.w600,)),
SizedBox(height: 12.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image.network(
"https://images.fineartamerica.com/images-medium-large-5/new-pittsburgh-emmanuel-panagiotakis.jpg",
height: 120.0,
width: (MediaQuery.of(context).size.width - 48) / 2 - 2,
fit: BoxFit.cover,
),
Image.network(
"https://cdn.pixabay.com/photo/2016/08/11/23/48/pnc-park-1587285_1280.jpg",
width: (MediaQuery.of(context).size.width - 48) / 2 - 2,
height: 120.0,
fit: BoxFit.cover,
)
]
)
]
)
),
SizedBox(height: 36.0),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("About", style: TextStyle(fontWeight: FontWeight.w600)),
SizedBox(height: 12.0),
Text(
"""Pittsburgh is a city in the state of Pennsylvania in the United States, and is the county seat of Allegheny County. A population of about 302,407 (2018) residents live within the city limits, making it the 66th-largest city in the U.S. The metropolitan population of 2,324,743 is the largest in both the Ohio Valley and Appalachia, the second-largest in Pennsylvania (behind Philadelphia), and the 27th-largest in the U.S.\n\nPittsburgh is located in the southwest of the state, at the confluence of the Allegheny, Monongahela, and Ohio rivers. Pittsburgh is known both as "the Steel City" for its more than 300 steel-related businesses and as the "City of Bridges" for its 446 bridges. The city features 30 skyscrapers, two inclined railways, a pre-revolutionary fortification and the Point State Park at the confluence of the rivers. The city developed as a vital link of the Atlantic coast and Midwest, as the mineral-rich Allegheny Mountains made the area coveted by the French and British empires, Virginians, Whiskey Rebels, and Civil War raiders.\n\nAside from steel, Pittsburgh has led in manufacturing of aluminum, glass, shipbuilding, petroleum, foods, sports, transportation, computing, autos, and electronics. For part of the 20th century, Pittsburgh was behind only New York City and Chicago in corporate headquarters employment; it had the most U.S. stockholders per capita. Deindustrialization in the 1970s and 80s laid off area blue-collar workers as steel and other heavy industries declined, and thousands of downtown white-collar workers also lost jobs when several Pittsburgh-based companies moved out. The population dropped from a peak of 675,000 in 1950 to 370,000 in 1990. However, this rich industrial history left the area with renowned museums, medical centers, parks, research centers, and a diverse cultural district.\n\nAfter the deindustrialization of the mid-20th century, Pittsburgh has transformed into a hub for the health care, education, and technology industries. Pittsburgh is a leader in the health care sector as the home to large medical providers such as University of Pittsburgh Medical Center (UPMC). The area is home to 68 colleges and universities, including research and development leaders Carnegie Mellon University and the University of Pittsburgh. Google, Apple Inc., Bosch, Facebook, Uber, Nokia, Autodesk, Amazon, Microsoft and IBM are among 1,600 technology firms generating \$20.7 billion in annual Pittsburgh payrolls. The area has served as the long-time federal agency headquarters for cyber defense, software engineering, robotics, energy research and the nuclear navy. The nation's eighth-largest bank, eight Fortune 500 companies, and six of the top 300 U.S. law firms make their global headquarters in the area, while RAND Corporation (RAND), BNY Mellon, Nova, FedEx, Bayer, and the National Institute for Occupational Safety and Health (NIOSH) have regional bases that helped Pittsburgh become the sixth-best area for U.S. job growth.
""",
softWrap: true,
)
]
)
),
SizedBox(height: 24),
]
)
);
}
Widget _button(String label, IconData icon, Color color){
return Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(16.0),
child: Icon(
icon,
color: Colors.white,
),
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
boxShadow: [BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.15),
blurRadius: 8.0,
)]
)
),
SizedBox(height: 12.0),
Text(label)
]
);
}
Widget _body(){
return Container(color: Colors.blue);
}
}
Upvotes: 0
Views: 867
Answers (1)
Saed Nabil
Reputation: 6861
If I understand your Question correctly then you need to use onPanelSlide: callback to report the sliding percentage of your panel.
so in your SlidingUpPannel will be
SlidingUpPanel(
onPanelSlide: _slidePosition, //add this line
maxHeight: _panelHeightOpen,
minHeight: 100,
parallaxEnabled: true,
parallaxOffset: 0.5,
panelBuilder: _panel,
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0))
),
then add _slidePosition callback
void _slidePosition(double percent){. //add this line
print ("percent = ${percent*100}"); //add this line
} //add this line
Widget _panel(ScrollController sc){
if (sc.hasClients) {
if (sc.position.userScrollDirection == ScrollDirection.forward){
print("forward");
}
else if (sc.position.userScrollDirection == ScrollDirection.reverse){
print("reverse");
}
}
Complete code after modification could be something like that
class ExamplePage extends StatefulWidget {
@override
_ExamplePageState createState() => _ExamplePageState();
}
class _ExamplePageState extends State<ExamplePage> {
double _panelHeightOpen;
double _percentage = 0;
@override
Widget build(BuildContext context){
_panelHeightOpen = MediaQuery.of(context).size.height * .80;
return Material(
child: Stack(
alignment: Alignment.topCenter,
children: [
_body(),
SlidingUpPanel(
onPanelSlide: _slidePosition,
maxHeight: _panelHeightOpen,
minHeight: 100,
parallaxEnabled: true,
parallaxOffset: 0.5,
panelBuilder: (sc) => _panel(sc),
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0))
),
/////////////////////////// Images Layer //////////////////////////////////////////
Positioned(
top: 50,
right: 10,
child: Image.network(
'https://media-cdn.tripadvisor.com/media/photo-c/1280x250/01/0a/11/98/alexandria.jpg',
height: 300,
width: 300,
fit: BoxFit.fill,
)
)
]
)
);
}
void _slidePosition(double percent){ //add this line
if (percent > _percentage){
print('Moving up');
}else if(percent<_percentage){
print('moving down');
}
_percentage = percent; //add this line
print('percent = $_percentage' );
} //add this line
Widget _panel(ScrollController sc){
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(
controller: sc,
children: [
Container(
padding: EdgeInsets.only(top: 70),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0))
)
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_button("Popular", Icons.favorite, Colors.blue),
_button("Food", Icons.restaurant, Colors.red),
_button("Events", Icons.event, Colors.amber),
_button("More", Icons.more_horiz, Colors.green),
]
),
SizedBox(height: 36.0),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Images", style: TextStyle(fontWeight: FontWeight.w600,)),
SizedBox(height: 12.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image.network(
"https://images.fineartamerica.com/images-medium-large-5/new-pittsburgh-emmanuel-panagiotakis.jpg",
height: 120.0,
width: (MediaQuery.of(context).size.width - 48) / 2 - 2,
fit: BoxFit.cover,
),
Image.network(
"https://cdn.pixabay.com/photo/2016/08/11/23/48/pnc-park-1587285_1280.jpg",
width: (MediaQuery.of(context).size.width - 48) / 2 - 2,
height: 120.0,
fit: BoxFit.cover,
)
]
)
]
)
),
SizedBox(height: 36.0),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("About", style: TextStyle(fontWeight: FontWeight.w600)),
SizedBox(height: 12.0),
Text(
"""Pittsburgh is a city in the state of Pennsylvania in the United States, and is the county seat of Allegheny County. A population of about 302,407 (2018) residents live within the city limits, making it the 66th-largest city in the U.S. The metropolitan population of 2,324,743 is the largest in both the Ohio Valley and Appalachia, the second-largest in Pennsylvania (behind Philadelphia), and the 27th-largest in the U.S.\n\nPittsburgh is located in the southwest of the state, at the confluence of the Allegheny, Monongahela, and Ohio rivers. Pittsburgh is known both as "the Steel City" for its more than 300 steel-related businesses and as the "City of Bridges" for its 446 bridges. The city features 30 skyscrapers, two inclined railways, a pre-revolutionary fortification and the Point State Park at the confluence of the rivers. The city developed as a vital link of the Atlantic coast and Midwest, as the mineral-rich Allegheny Mountains made the area coveted by the French and British empires, Virginians, Whiskey Rebels, and Civil War raiders.\n\nAside from steel, Pittsburgh has led in manufacturing of aluminum, glass, shipbuilding, petroleum, foods, sports, transportation, computing, autos, and electronics. For part of the 20th century, Pittsburgh was behind only New York City and Chicago in corporate headquarters employment; it had the most U.S. stockholders per capita. Deindustrialization in the 1970s and 80s laid off area blue-collar workers as steel and other heavy industries declined, and thousands of downtown white-collar workers also lost jobs when several Pittsburgh-based companies moved out. The population dropped from a peak of 675,000 in 1950 to 370,000 in 1990. However, this rich industrial history left the area with renowned museums, medical centers, parks, research centers, and a diverse cultural district.\n\nAfter the deindustrialization of the mid-20th century, Pittsburgh has transformed into a hub for the health care, education, and technology industries. Pittsburgh is a leader in the health care sector as the home to large medical providers such as University of Pittsburgh Medical Center (UPMC). The area is home to 68 colleges and universities, including research and development leaders Carnegie Mellon University and the University of Pittsburgh. Google, Apple Inc., Bosch, Facebook, Uber, Nokia, Autodesk, Amazon, Microsoft and IBM are among 1,600 technology firms generating \$20.7 billion in annual Pittsburgh payrolls. The area has served as the long-time federal agency headquarters for cyber defense, software engineering, robotics, energy research and the nuclear navy. The nation's eighth-largest bank, eight Fortune 500 companies, and six of the top 300 U.S. law firms make their global headquarters in the area, while RAND Corporation (RAND), BNY Mellon, Nova, FedEx, Bayer, and the National Institute for Occupational Safety and Health (NIOSH) have regional bases that helped Pittsburgh become the sixth-best area for U.S. job growth.
""",
softWrap: true,
)
]
)
),
SizedBox(height: 24),
]
)
);
}
Widget _button(String label, IconData icon, Color color){
return Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(16.0),
child: Icon(
icon,
color: Colors.white,
),
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
boxShadow: [BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.15),
blurRadius: 8.0,
)]
)
),
SizedBox(height: 12.0),
Text(label)
]
);
}
Widget _body(){
return Container(color: Colors.blue);
}
}
Upvotes: 1
Related Questions
- Detect if Scrollable widget is scrolled manually or programatically
- How to manipulate the ScrollController in Flutter's sliding up panel plugin?
- flutter sliding_up_panel plugin how to jumpTo top of panel on close?
- Flutter sliding up panel callback
- How to do sliding panel in Flutter?
- How to ensure button is always pinned to bottom of slide up panel - Flutter
- How do I call a sliding up panel in Flutter?
- Detect when widget changes position in Flutter
- Slide-up screen change animation
- Listener for checking the state of SlidingUpPanel