Scrollable page in flutter

Question

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 :)

score 0 · Answer 1 · answered Sep 10 '20 at 17:13

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.'),
          ],
        ),
      ],
    ),
  );

score 0 · Answer 2 · answered Sep 10 '20 at 17:36

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,
                            )),
                      )),
                ],
              ),
            ],
          ),
        ));
  }

Scrollable page in flutter

2 Answers2