Search code examples
flutterflutter-web

Flutter: Scroll bar within a container in Flutter web


I want to add a scroll bar within a fixed size container in Flutter web as shown in the picture link below. Can anyone give me advice on this? I am stuck here. I have tried Single child scroll view with Flutter_web_scrollbar but it doesn't work. Here is the code.

Container(
                width: 300,
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  controller: _bcontroller,
                  child: Column(
                    children: [
                      Container(
                        width: 300,
                        child: Row(
                          children: [
                            Text(
                              '${eventList.length > 0 ? i['ShipName'] : ''}',
                            
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 300,
                        child: Row(
                          children: [
                            Text(
                              '${eventList.length > 0 ? i[getEventDesc()].toString() : ''}',
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                    ],
                  ),
                ),
              )

Example


Solution

  • Wrap SingleChildScrollView with Scrollbar Widget.

    import 'package:flutter/material.dart';
    
    final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }
    
    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
                width: 300,
          height: 200,
        child: Scrollbar(
                 child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Column(
                    children: [
                      Container(
                        width: 300,
                        height: 100,
                        child: Row(
                          children: [
                            Text(
                              'your variable',
                            
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 300,
                        height: 100,
                        child: Row(
                          children: [
                            Text(
                              'your variable',
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                    ],
                  ),),
                ),
              );
      }
    }