We can use the DraggableScrollableSheet widget for many purposes. However, in this tutorial, we’ll see how with the help of this widget, we can add a list of words, which will be displayed below on a sheet that we can scroll to view.
Before jumping in to the code and related screenshots, let’s try to understand a few basic concepts about draggable scrollable sheet widget.
Certainly, we can compare this widget with CustomScrollView, NestedScrollView, PageView and ListView widgets. The functionality of this widget, in many ways, is similar to other Scrolling Widgets. However, since this widget is draggable and scrollable at the same time, it is at an advantage.
Quite naturally, this advantage puts this widget in a superior position.
Why so?
Let’s see the screenshots firstly. So that we can visualise the advantages. As regards, the draggable and scrollable effect, we can have a total grip on the size of the sheet that has been generated.
We’ve built a small but functional app using which we can practise vocabulary. Once we type the words, we can add them to the bottom sheet by clicking the keypad.
After that we can view the list from top to bottom by scrolling just like the following second screenshot that displays the upper side.
Since the lower bottom sheet is scrollable, we can scroll vertically and see the last word that we’ve typed.
Of course, we could have made the image much smaller or made the draggable scrollable sheet much bigger.
How does that happen?
The DraggableScrollableSheet can extend up to a certain fraction of the total screen of our app. Meanwhile, the scrolling effect can occur inside its expanded height. As it expands its size, it also contains the list of words that we’re typing above.
The parameters of draggable scrollable sheet
Let us see the full code, so that we can discuss the parts of the code separately.
import 'package:flutter/material.dart';
class DraggableScrollableSheetSample extends StatelessWidget {
const DraggableScrollableSheetSample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Draggable Scrollable Sheet Sample',
home: DraggableScrollableSheetHome(),
);
}
}
class DraggableScrollableSheetHome extends StatefulWidget {
const DraggableScrollableSheetHome({Key? key}) : super(key: key);
@override
State<DraggableScrollableSheetHome> createState() =>
_DraggableScrollableSheetHomeState();
}
List<String> listOfItems = [];
final TextEditingController textController = TextEditingController();
class _DraggableScrollableSheetHomeState
extends State<DraggableScrollableSheetHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Vocabulary Practice'),
),
body: Stack(
children: <Widget>[
Image.network(
'https://cdn.pixabay.com/photo/2018/04/07/08/28/notepad-3297994_960_720.jpg',
fit: BoxFit.cover,
width: double.infinity,
),
const SizedBox(
height: 30,
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(10),
child: Text(
'Type Below',
style: TextStyle(
fontFamily: 'Allison',
fontSize: 60,
fontWeight: FontWeight.bold,
foreground: Paint()
..color = Colors.red
..strokeWidth = 2.0
..style = PaintingStyle.stroke,
),
),
),
const SizedBox(
height: 60,
),
Container(
margin: const EdgeInsets.all(40),
padding: const EdgeInsets.all(40),
child: TextField(
controller: textController,
onSubmitted: (text) {
listOfItems.add(text);
textController.clear();
setState(() {});
},
),
),
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
color: Colors.blue[100],
child: ListView.builder(
itemCount: listOfItems.length,
itemBuilder: (BuildContext ctxt, int index) {
return Text(
listOfItems[index],
style: const TextStyle(
fontFamily: 'Allison',
fontSize: 40,
fontWeight: FontWeight.bold,
),
);
},
),
),
);
},
),
],
),
);
}
}For more flutter user interface widgets please visit the relevant GitHub repository.
Since we’ve planned to add a list of words, so we need to have the following part of the code where we have a text field, text editing controller and a mechanism that will add words to the list.
List<String> listOfItems = [];
final TextEditingController textController = TextEditingController();
...
TextField(
controller: textController,
onSubmitted: (text) {
listOfItems.add(text);
textController.clear();
setState(() {});
},
),
...The draggable scrollable sheet can be dragged along the vertical axis. What does determine its size?
The size varies between its minChildSize, which defaults to 0.25 and maxChildSize, which defaults to 1.0. These sizes are percentages of the height of the parent container.
As we have used a ListView.builder, and started adding words, the draggable scrollable widget coordinates resizing and scrolling of the widget returned by the builder.
ListView.builder(
itemCount: listOfItems.length,
itemBuilder: (BuildContext ctxt, int index) {
return Text(
listOfItems[index],
style: const TextStyle(
fontFamily: 'Allison',
fontSize: 40,
fontWeight: FontWeight.bold,
),
);
},
),
...As soon as we open the app, we can see the initial size, which is controlled by the parameter initialChildSize which defaults to 0.5.
Dragging will work between the range of minChildSize and maxChildSize parameters. They are percentages of the parent container’s height. If we create the widget by the ScrollableWidgetBuilder, and it does not use the provided ScrollController, the sheet will remain at the initialChildSize.
The expand parameter takes the boolean value true or false. With reference to the size, this parameter decides whether the widget should expand available space in its parent or not, having default value true.
Leave a Reply