[flutter] 플러터 Table 위젯에서 특정 셀에 대화상자 팝업 추가하기

15 Dec 2023

flutter

우선, 해당 기능을 구현하기 위해 GestureDetector 위젯을 사용하여 셀에 터치 이벤트를 추가할 수 있습니다. 다음으로 showDialog 함수를 사용하여 팝업 다이얼로그를 표시할 수 있습니다.

아래는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Table Cell Popup Example'),
        ),
        body: Center(
          child: Table(
            children: [
              TableRow(
                children: [
                  GestureDetector(
                    child: TableCell(
                      child: Text('Cell 1'),
                    ),
                    onTap: () {
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            title: Text("Popup Title"),
                            content: Text("This is the popup content."),
                            actions: [
                              ElevatedButton(
                                child: Text('Close'),
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                              ),
                            ],
                          );
                        },
                      );
                    },
                  ),
                  TableCell(
                    child: Text('Cell 2'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제 코드는 Table 위젯을 사용하여 두 개의 셀을 표시하고, 첫 번째 셀에 GestureDetector를 추가하여 터치 이벤트를 감지하고 showDialog 함수를 사용하여 팝업 다이얼로그를 표시하는 방법을 보여줍니다.

이제 위의 코드를 참고하여 Table 위젯에 대화상자 팝업을 추가할 수 있습니다.