Home > Blockchain >  How to scroll a ListView inside a Column that inside a BottomSheet
How to scroll a ListView inside a Column that inside a BottomSheet

Time:11-14

I have a ListView inside a Column inside a BottomSheet like this

I want to scroll ListView without affecting Container that contains Text("Text No Scroll")enter image description here

So pls help me, this is my code so far:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => Get.bottomSheet(
            GetXBottomSheet(),
            backgroundColor: Colors.white,
            isScrollControlled: true,
          ),
        ),
      ),
    );
  }
}

class GetXBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(maxHeight: Get.height * 0.7),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
              child: Text('Text No Scroll', textAlign: TextAlign.center),
              color: Colors.grey,
              width: double.infinity),
          ListView.separated(
            separatorBuilder: (__, _) => Divider(height: 0),
            itemCount: List<int>.generate(100, (i) => i).length,
            shrinkWrap: true,
            physics: ScrollPhysics(),
            itemBuilder: (BuildContext context, int index) {
              return Text('$index');
            },
          ),
        ],
      ),
    );
  }
}

CodePudding user response:

From the code that you have provided I have created an example that will fulfil your requirement.

Key Points:

For the bottom sheet you have :

  1. give the alignment for the container of text so that it will be fixed.
  2. Add an expanded widget to the list view so that it can scroll
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void _modalBottomSheetMenu() {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return Container(
            constraints: BoxConstraints(
                maxHeight: MediaQuery.of(context).size.height * 0.7),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                    alignment: Alignment.topCenter,
                    child: Text('Text No Scroll', textAlign: TextAlign.center),
                    color: Colors.grey,
                    width: double.infinity),
                Expanded(
                  child: ListView.separated(
                    separatorBuilder: (__, _) => Divider(height: 0),
                    itemCount: List<int>.generate(100, (i) => i).length,
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemBuilder: (BuildContext context, int index) {
                      return Text('$index');
                    },
                  ),
                ),
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => _modalBottomSheetMenu(),
        ),
      ),
    );
  }
}

Check this out and let me know if it works

Thanks

  • Related