Flutter: Scroll bar within a container in Flutter web

Question

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

Leon · Accepted Answer · 2021-05-06 09:32:15Z

1

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

edited May 6, 2021 at 9:32

answered May 5, 2021 at 15:58

Leon

1623 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ang Xing Over a year ago

Thanks but i have try your solution and It doesn't work

Leon Over a year ago

I edit the code, try now. The container height must be < of total height.

Collectives™ on Stack Overflow

Flutter: Scroll bar within a container in Flutter web

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest