Issue
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,
),
],
),
),
)
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,
),
],
),),
),
);
}
}
Answered By – Leon
Answer Checked By – Terry (FlutterFixes Volunteer)