flutter - 모달창 띄우기 - dialog > 프로그래밍

본문 바로가기

프로그래밍

flutter - 모달창 띄우기 - dialog

본문



접기 [ ▼ 작성자 참고 Source ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import 'package:flutter/material.dart';
 
void main() {
  runApp(
      MaterialApp(
        home: Suse_App()
      )
  );
}
 
 
 
class Suse_App extends StatefulWidget {
  Suse_App({super.key});
 
  @override
  State<suse_app> createState() => _Suse_AppState();
}
 
class _Suse_AppState extends State<suse_app> {
  var a = 1;
  var name = ['Suse', 'Redhat', 'Ubuntu'];
  var like = [0,0,0];
 
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
            floatingActionButton: FloatingActionButton(
              onPressed: (){
                showDialog(context: context, builder: (context){
                  return Dialog(child: Text('Hello Wolrd Flutter'),);
                });
              },
            ),
            appBar: AppBar(),
            body: ListView.builder(
              itemCount: 3,
              itemBuilder: (c, i){
                return ListTile(
                  leading: Image.asset('assets/images/3.png'),
                  title: Text(name[i]),
                );
              },
            )
        );
  }
}</suse_app></suse_app>


본문

1. 버튼을 클릭하면 다이얼로그 띄우기

다이얼로그를 버튼 클릭 시 띄우려면 FloatingActionButton의 onPressed 속성에 showDialog를 추가합니다.

 

2. 코드 예제

showDialog 필수 파라미터는 context: 현재 화면의 빌드 컨텍스트, builder: 다이얼로그의 UI를 반환하는 함수 입니다


3. 내용 정리

showDialog 사용 시 context와 builder가 필요하며, 다이얼로그 안에 Dialog 위젯을 사용하여 원하는 UI 구성 가능이 있으며, FloatingActionButton을 클릭하면 다이얼로그가 나타납니다

0 0
로그인 후 추천 또는 비추천하실 수 있습니다.


댓글목록0

등록된 댓글이 없습니다.
게시판 전체검색
0%