[Flutter] Dialog/모달창 만드는 법 & context

Dialog/모달창 만드는 법 & context

• Dialog란?
  • 모달창을 의미
• 버튼을 클릭 시 모달 창을 띄우고자 한다면?
  • 우선 모달을 띄우고자 한다면
    • showDialog()를 사용하면 되고
    • 인자로는 context와 builder로 채워준다
      • builder는 함수로 (context){} 로 작성을 하면 된다.
• 코드는 아래과 같이 작성하게 되는데
  • 우선 변경 된 부분으로는 원래 void main() 에 runApp()으로 home: MyApp() 만 전달하게 되고
  • MaterialApp은 그 아래의 클래스인 _MyAppState의 최상단에서 return으로 감싸줘서
  • return MaterialApp( Scaffold() )
  • 와 같이 작성했었는데 아래의 코드와 같이 변경한 이유는
  • context의 특징점으로 작성하게 된다.
  • 이유는 코드 이후에 context에 대해 설명하며 함께 설명!
    • 간단한 이유
      • context를 사용해야 사용할 수 있는 함수가 존재
      • 해당 함수들에서는 MaterialApp을 가지는 상위 요소로 받아오는 context가 필요!

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  var a = 1;
  var name = ['메시', '날강두', '홀란'];
  var cnt = [0, 0, 0];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showDialog(context: context, builder: (context){
            return Dialog(child: Text('hi'));
          });
        },
      ),
      appBar: AppBar(),
      body: ListView.builder(
          itemCount: 3,
          itemBuilder: (c,i){
            return ListTile(
              leading: Text(cnt[i].toString()),
              title: Text(name[i]),
              trailing: TextButton(
                child: Text('좋아요'),
                onPressed: (){
                  setState(() {
                    cnt[i]++;
                  });
                },
              ),
            );
          }
      ),
    );
  }
}

• 여기서 showDialog()에 있는 context는 상위에 있는 Widget build(BuildContext context)의 context로 부모 위젯의 정보를 담고있는 변수가 된다.
• 그래서 context는 부모가 누구인지에 대한 정보를 알려주게 된다,
  • 위의 코드에선 Scaffold의 부모는 MaterialApp이 된다.
  • 부모 중에 MaterialApp이 있는지 한번 확인해보고 싶다면 아래와 같이 작성해보면 알 수 있다.
  • print(context.findAncestorWidgetOfExactType<MaterialApp>());
• 그리고 context로부터 사용할 수 있는 함수로는 아래와 같다
  • showDialog(context)
  • Scaffold.of(context)
  • Navigator.pop(context)
  • Theme.of(context)
• 다만 어떠한 context면 되는 것이 아니라 MaterialApp이 들어있는 context를 입력해야 문제 없이 동작을 할 수 있게 된다.
• 만약 중간에 context로 상위 요소를 추가하고 싶다면 전구버튼을 클릭 후 Wrap with Builder를 클릭하게 되면 중간에 상위 요소를 만들어주게 되면서 context로 생성된다.

 

숙제

• 버튼 클릭 시 모달을 생성
• 모달내에는 Contact와 Input Tag와 Cencel, OK 버튼이 있다
• Cencel 버튼을 클릭 시 모달 창 닫기

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  var a = 1;
  var name = ['메시', '날강두', '홀란'];
  var cnt = [0, 0, 0];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showDialog(context: context, builder: (context){
            return Dialog(
              child: Modal()
            );
          });
        },
      ),
      appBar: AppBar(),
      body: ListView.builder(
          itemCount: 3,
          itemBuilder: (c,i){
            return ListTile(
              leading: Text(cnt[i].toString()),
              title: Text(name[i]),
              trailing: TextButton(
                child: Text('좋아요'),
                onPressed: (){
                  setState(() {
                    cnt[i]++;
                  });
                },
              ),
            );
          }
      ),
    );
  }
}

class Modal extends StatelessWidget {
  const Modal({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(30),
            child: Text('Contact', style: TextStyle(fontSize: 40, fontWeight: FontWeight.w900)),
          ),
          Container(
            margin: EdgeInsets.all(30),
            child: TextField(style: TextStyle(fontSize: 30),),
          ),
          Container(
            margin: EdgeInsets.all(30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                  child: TextButton(onPressed: (){
                    Navigator.pop(context);
                  }, child: Text('Cencel', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),)),
                ),
                Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                    child: TextButton(onPressed: (){
                      
                    }, child: Text('OK', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),)),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}