I am new to flutter dart language and was wondering how to make the page scroll. This is one of the pages of the code which I want to scroll:
class Second extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(30.0, 296.0),
child:
Container(
width: 315.0,
height: 287.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(37.0),
image: DecorationImage(
image: const AssetImage('assets/images/right.png'),
fit: BoxFit.fill,
)
),
),
),
],
),
),
);
}
);
}
}
Note that this is not the full code as the code is very long. I tried using the Draggable Scrollable Sheet and when I ran the code I could only see a black screen. Can someone help me? Thanks in advance :)
Easiest way to make something scroll in Flutter is to use ListView widget. Try something like this:
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Column(
children: [
Container(
height: 2000,
child: Text('This container exceeds most screens'),
),
Text('End of container.'),
],
),
],
),
);
You can use SingleChildScrollview or Listview for scrolling,let me know if it works for you
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffffffff),
appBar: AppBar(
title: Text(""),
),
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: <Widget>[
Transform.translate(
offset: Offset(30.0, 296.0),
child: Container(
width: 315.0,
height: 287.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(37.0),
image: DecorationImage(
image: const
AssetImage('assets/images/right.png'),
fit: BoxFit.fill,
)),
)),
],
),
],
),
));
}
User contributions licensed under CC BY-SA 3.0