Introduction:
SlidingUp panels are a popular UI component in mobile applications, allowing for the presentation of additional content or controls that can slide up from the bottom of the screen. In Flutter, the sliding_up_panel package provides an easy way to integrate this functionality into your app.
Content:
1. Add Dependency:
Start by adding the sliding_up_panel package to your pubspec.yaml file. This ensures that your Flutter project can access the necessary functionalities provided by the package.
dependencies:
flutter:
sdk: flutter
sliding_up_panel: ^1.0.0
Then, run the following command in your terminal to fetch the package:
flutter pub get
2. Import Package:
Import the sliding_up_panel package in the Dart file where you intend to implement the slidingUp panel. This allows you to utilize the features and widgets provided by the package within your code.
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
3. Create Widget:
Define a widget that will serve as the container for the slidingUp panel and any other content you wish to display. This widget will form the basis of your slidingUp panel implementation.
class SlidingUpPanelPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SlidingUp Panel Example'),
),
body: SlidingUpPanel(
panel: Center(
child: Text('This is the sliding panel content'),
),
body: Center(
child: Text('This is the main content'),
),
),
);
}
}
4. Customize Panel Behavior (Optional):
Optionally, customize the behavior of the slidingUp panel to align with your app’s design and functionality requirements. You can adjust properties such as panel height, backdrop color, and animation duration to achieve the desired effect.
SlidingUpPanel(
panel: Center(
child: Text('This is the sliding panel content'),
),
body: Center(
child: Text('This is the main content'),
),
minHeight: 100,
maxHeight: 500,
),
5. Run the Application:
After implementing the slidingUp panel, run your Flutter application on a device or emulator to observe the slidingUp panel in action. This allows you to test its functionality and ensure that it behaves as expected within your app environment.
flutter run
Sample Code:
1. add the permission AndroidManifest.xml:
path:-android/app/main/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-feature android:name="android.hardware.location.network" android:required="false" />
2. add the key AndroidManifest.xml:
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="AIzaSyA2ejzT7rnz6u9rlyvaEt1fT46539yDjNA"/>
// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors, sort_child_properties_last, library_private_types_in_public_api
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class SlidingUpPanelExample extends StatelessWidget {
@override
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'SlidingUpPanel Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final double _initFabHeight = 120.0;
double _fabHeight = 0;
double _panelHeightOpen = 0;
double _panelHeightClosed = 95.0;
@override
Widget build(BuildContext context) {
_panelHeightOpen = MediaQuery.of(context).size.height * .80;
return Material(
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
SlidingUpPanel(
maxHeight: _panelHeightOpen,
minHeight: _panelHeightClosed,
parallaxEnabled: true,
parallaxOffset: .5,
body: _body(),
panelBuilder: (sc) => _panel(sc),
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0)),
onPanelSlide: (double pos) => setState(() {
_fabHeight = pos * (_panelHeightOpen - _panelHeightClosed) + _initFabHeight;
}),
),
// the fab
Positioned(
right: 20.0,
bottom: _fabHeight,
child: FloatingActionButton(
child: Icon(
Icons.gps_fixed,
color: Theme.of(context).primaryColor,
),
onPressed: () {},
backgroundColor: Colors.white,
),
),
Positioned(
top: 0,
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).padding.top,
color: Colors.transparent,
)))),
//the SlidingUpPanel Title
Positioned(
top: 52.0,
child: Container(
padding: const EdgeInsets.fromLTRB(24.0, 18.0, 24.0, 18.0),
child: Text(
"SlidingUpPanel Example",
style: TextStyle(fontWeight: FontWeight.w500),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.0),
boxShadow: [BoxShadow(color: Color.fromRGBO(0, 0, 0, .25), blurRadius: 16.0)],
),
),
),
],
),
);
}
Widget _panel(ScrollController sc) {
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(
controller: sc,
children: <Widget>[
SizedBox(
height: 12.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 30,
height: 5,
decoration: BoxDecoration(color: Colors.grey[300], borderRadius: BorderRadius.all(Radius.circular(12.0))),
),
],
),
SizedBox(
height: 18.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Explore Pittsburgh",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 24.0,
),
),
],
),
SizedBox(
height: 36.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.spaceAround,
children: <Widget>[
Image(
width: 160,
image:
NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2-OXlLKD9kCGj6V3xEagRjWRSOWQDhdD9AbWtBGnxcw&s")),
Image(
width: 160,
image: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2-OXlLKD9kCGj6V3xEagRjWRSOWQDhdD9AbWtBGnxcw&s"))
],
),
],
),
),
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 GoogleMap(
onMapCreated: (GoogleMapController controller) {},
initialCameraPosition: CameraPosition(
target: LatLng(20.5937, 78.9629), // Indian location
zoom: 7, // Zoom level (adjust as needed for closer or farther view)
),
myLocationEnabled: true,
myLocationButtonEnabled: false,
mapType: MapType.normal,
zoomGesturesEnabled: true,
zoomControlsEnabled: false,
);
}
}
Output:
Conclusion:
Integrating a slidingUp panel into your Flutter app using the sliding_up_panel package offers an intuitive way to present additional content or controls to users. By following the steps outlined in this guide and customizing the panel behavior as needed, you can seamlessly incorporate a slidingUp panel into your app’s UI. Experiment with different configurations and explore the package’s features to create a slidingUp panel that enhances user interaction and improves overall user experience.
This structured approach to implementing a slidingUp panel ensures that you can efficiently leverage this UI component in your Flutter app, providing users with a seamless and engaging interface.
