[Flutter] Bottom Sheet

2020. 12. 26. 14:45Flutter Mobile App/Flutter 기초

반응형

Bottom Sheet : 하단에서 페이지가 슬라이드로 올라오는 기능

 

 

Bottom Sheet


main.dart

더보기
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MINOKUMA - FLUTTER'),
      ),
      body: MyBottomSheet(),
    );
  }
}

class MyBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('하단 시트 열기'),
        onPressed: () {
          // Scaffold.of 에 의해 보텀 시트 하단에서 올라오게 된다.
          Scaffold.of(context).showBottomSheet<void>((BuildContext context) {
            return Container(
              height: 600,
              color: Colors.blueAccent,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text('하단 시트'),
                    RaisedButton(
                      child: Text('닫기'),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    )
                  ],
                ),
              ),
            );
          });
        },
      ),
    );
  }
}

 

위젯 : RaisedButton

- 액션 : Scaffold.of 에 의해서 Bottom Sheet 하단에서 올라오도록 동작

 

 

 

반응형

'Flutter Mobile App > Flutter 기초' 카테고리의 다른 글

[Flutter] Card + ListTile  (0) 2020.12.26
[Flutter] Card  (0) 2020.12.26
[Flutter] ListView (separated)  (0) 2020.12.26
[Flutter] ListView (Builder)  (0) 2020.12.26
[Flutter] Drawer  (0) 2020.12.26