소개

showModalBottomSheet()라는 메소드를 이용하는 것으로, 「아래로부터 뇨키와 나오는 윈도우」와 같은 것을 만들 수 있다.

이번에는 그것을 사용하여 "모퉁이가 둥근 Container"를 표시한다.
아래 이미지와 같은 느낌.



상변의 양단을 봐 주시면 아시다시피, 모퉁이가 둥글다.
모서리를 둥글게하기 위해서는 RoundedRectangleBorder 위젯을 이용하지만, 보통 사용하면 Container와의 궁합이 나쁜 것 같다.
그것에 대해서는, 나중에 해설한다.

코드

그럼 조속히, 코드를 전문재 넣어 둔다.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('Push'),
          onPressed: () {
            showModalBottomSheet(
                context: context,
                isScrollControlled: true,   //trueにしないと、Containerのheightが反映されない
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
                ),
                builder: (BuildContext context) {
                  return Container(
                    height: 540,
                  );
                });
          },
        ),
      ),
    );
  }
}

showModalBottomSheet의 속성으로 isScrollControlled 및 shape를 지정합니다.
그 이외는 매우 간단.
isScrollControlled는 true로 설정하지 않으면 Container의 height 설정이 반영되지 않으므로 주의.

이제 버튼을 누르면 이미지와 같은 창이 표시되는 앱이 생겼습니다.

어려움

Container의 색을 변경하고 싶을 때는 어떻게 하면 좋을까.
실은 Container내에서 color 프로퍼티를 변경해도, 잘 동작하지 않는다.

시험에 Container 위젯 안을 이렇게 써 바꾸어 봐 주세요.

                  return Container(
                    height: 540,
                    color: Colors.red,
                  );

color 속성에 Colors.red를 지정하여 빨간색으로 만들려고합니다.
실행하면 이렇게 된다.



뿔이 사각형! !

이것은 실망했다.
아무래도 모서리를 둥글게 하면서, 색을 변경하기 위해서는, Container가 아니고 showModalBottomSheet 그 자체의 인수에 건네주지 않으면 안 되는 것 같다.

그렇다면 showModalBottomSheet 안을 이렇게 바꾸면 잘된다.

            showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                backgroundColor: Colors.red,   //これを追加した
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
                ),
                builder: (BuildContext context) {
                  return Container(
                    height: 540,
                  );
                });

실행하면 이렇게 된다.



이것으로 일건 낙착!