Flutter - How to show Scrollbar outside page

XuuanThuc
November 1, 2023
167 views
1 vote
2 Answers

I’m trying make a web with Flutter. When I created a list widget, I see my Scrollbar nextto list widget like this

My result:

And this is what I want to do for scrollbar:

How can I move scroll to outside of my page?

My code:

Scaffold(
      appBar: AppBar(),
      body: SizedBox(
        width: MediaQuery.sizeOf(context).width,
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  constraints: const BoxConstraints(
                    maxWidth: 1200,
                  ),
                  child: Column(
                    children: [
                             //widgets
                    ],
                  ),
                )
                ],
            ),
          ),
        ),
      ),
    );

Thanks

Tags: flutter scrollbar

Answers

Chosen as BEST ANSWER

I moved Center Widget to inside SingleChildScrollView and it work:

Old:

Scaffold(
      appBar: AppBar(),
      body: SizedBox(
        width: MediaQuery.sizeOf(context).width,
        child: Center(
          child: SingleChildScrollView(
            child:
                Container(
                  constraints: const BoxConstraints(
                    maxWidth: 1200,
                  ),
                  child: Column(
                    children: [
                             //widgets
                    ],
                  ),
            ),
          ),
        ),
      ),
    );

New:

Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Center(
          child: Container(
            constraints: const BoxConstraints(
              maxWidth: Public.desktopSize,
            ),
            child: const Column(
              children: [
                //widgets
              ],
            ),
          ),
        ),
      ),
    );

(Edit)

Based on your question
There two ways to achive your purpose:

set the crossAxisAlignment on Column parent with CrossAxisAlignment.stretch`.
Add widget that have double.infinity width to Column parent.

 Scaffold(
    appBar: AppBar(),
    body: SizedBox(width: MediaQuery.sizeOf(context).width),
    /// you can remove the SizedBox widget above
    child: Center(
      child: SingleChildScrollView(
        child: Column(
          /// Add code below, or
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            /// Add code below. Choose one
            SizedBox(width: double.infinity),

            /// OR
            SizedBox(width: MediaQuery.of(context).size.width),

            Container(
              constraints: const BoxConstraints(
                maxWidth: 1200,
              ),
              child: Column(
                children: [
                  //widgets
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

Check my comment inside code section

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to show Scrollbar outside page

Answers