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

본문 바로가기

프로그래밍

flutter - 모달창 띄우기 - dialog

본문



접기 [ ▼ 작성자 참고 Source ]
import 'package:flutter/material.dart';

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



class Suse_App extends StatefulWidget {
  Suse_App({super.key});

  @override
  State createState() => _Suse_AppState();
}

class _Suse_AppState extends State {
  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]),
                );
              },
            )
        );
  }
}


본문

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

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

 

2. 코드 예제

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


3. 내용 정리

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

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


댓글목록0

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