Dev/Flutter

Flutter - ScrollListView

healthyryu 2021. 11. 17. 18:25

Flutter 에서 ScrollListView 적용 방법

참고 : https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

 

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Title';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.bodyText2!,
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: items.length,
                    itemBuilder: (context, index) {
                      return Text(items[index]);
                    },
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

 

기본적으로는 리스트에서 스크롤이 되게 하려면 스크롤 기능을 주기 위해서 AlwaysScrollableScrollPhysics() 을 설정해주면 되지만 위의 코드는 SingleChildScrollView 로 감싸고 있기 때문에 반대로 넣어줘야 한다.

반응형