flutter listview builder scroll

flexible widget의 경우, child widget의 크기를 가변적으로 할 수 있게만 만들어주고, scrollable하게는 만들어주지 않는다.

그래서 SingleChildScrollView로 flexible 위젯을 감싸줘야한다.

 

class MonthScreen extends StatelessWidget {
  const MonthScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: SingleChildScrollView(
            child: SafeArea(
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: 8.0),
            Tablecalendar(),
            SizedBox(height: 80.0),
            Eventlist(),
            SizedBox(height: 8.0),
          ],
        ))));
  }
}

Scaffold의 body 에서 SingleChildScrollView를 이용해서 감싸주었다.

그러다보니 전체 화면이 scroll이 되는 것을 확인 할 수 있었다.

class Eventlist extends StatelessWidget {
  late calendarModel calendarmodel;
  late DiaryDailyQuillModel quillController;

  Eventlist({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    calendarmodel = Provider.of<calendarModel>(context);
    quillController = Provider.of<DiaryDailyQuillModel>(context);

    return Container(child: Flexible(child: listview()));
  }
}

 

class listview extends StatelessWidget {
  listview({Key? key}) : super(key: key);
  late calendarModel calendarmodel;
  late DiaryDailyQuillModel quillController;

  @override
  Widget build(BuildContext context) {
    calendarmodel = Provider.of<calendarModel>(context);
    quillController = Provider.of<DiaryDailyQuillModel>(context);

    return ListView.builder(
        scrollDirection: Axis.vertical,
        physics: const NeverScrollableScrollPhysics(),

        //physics: AlwaysScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: calendarmodel.selectedEvents.length,
        itemBuilder: (context, index) {
          return Container();

listview.builder 내에서 physics를 NeverScrollableScrollPhysics로 설정해주었다.

SingleChildScrollView에서 스크롤을 하기 때문에 listview builder 내에서는 스크롤을 못하게 만들어줘야하기 때문이다. 

그래서 다음과 같은 결과가 나왔다.

하지만, 내가 원하는 것은 이렇게 전체가 스크롤되는 것이 아니라, 캘린더 달력과 bottom navigation 사이의 할일들 리스트 부분만 스크롤 되는 것이다.

 

그렇게 하기 위해서는 SingleChildScrollView로 전체를 감싸주면 안된다.SingleChildScrollView를 빼주고,

class MonthScreen extends StatelessWidget {
  const MonthScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
                child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: 8.0),
            Tablecalendar(),
            SizedBox(height: 80.0),
            Eventlist(),
            SizedBox(height: 8.0),
          ],
        )));
  }
}

그냥 flexible안에 listview builder를 넣어준다.

class Eventlist extends StatelessWidget {
  late calendarModel calendarmodel;
  late DiaryDailyQuillModel quillController;

  Eventlist({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    calendarmodel = Provider.of<calendarModel>(context);
    quillController = Provider.of<DiaryDailyQuillModel>(context);

    return Flexible(child: listview());
  }
}

그리고 physics를 AlwaysScrollableScrollPhysics로 해준다. 

class listview extends StatelessWidget {
  listview({Key? key}) : super(key: key);
  late calendarModel calendarmodel;
  late DiaryDailyQuillModel quillController;

  @override
  Widget build(BuildContext context) {
    calendarmodel = Provider.of<calendarModel>(context);
    quillController = Provider.of<DiaryDailyQuillModel>(context);

    return ListView.builder(
        scrollDirection: Axis.vertical,
        physics: AlwaysScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: calendarmodel.selectedEvents.length,
        itemBuilder: (context, index) {
          return Container();

코드가 처음보다 깔끔해졌다.

listview builder를 원하는대로 사용하기가 어려웠지만, 해결하고 나니 너무 쉬운 해결법이었다,,,

다음은 결과이다!