쏘니의 개발블로그

1. JSON 파일 추가 및 등록: JSON 파일을 assets 폴더에 추가하고 pubspec.yaml 파일에 등록합니다.

{
  "users": [
    {
      "id": 1,
      "username": "Anna",
      "email": "anna@gmail.com"
    },
    {
      "id": 2,
      "username": "David",
      "email": "david@gmail.com"
    },
    {
      "id": 3,
      "username": "brian",
      "email": "brian@gmail.com"
    },
    {
      "id": 4,
      "username": "roky",
      "email": "roky@gmail.com"
    },
    {
      "id": 5,
      "username": "sam",
      "email": "sam@gmail.com"
    },
    {
      "id": 6,
      "username": "dead",
      "email": "dead@gmail.com"
    }
  ]
}

2. JSON 파일 읽기 및 파싱

dart:convert와 flutter/services.dart 패키지를 사용하여 JSON 파일을 읽고 파싱합니다.

static Future loadJson() async {
    final String response = await rootBundle.loadString("lib/users.json");
    final data = await json.decode(response);
    return data['users'];
  }

  Future userList = loadJson();

3. 위젯에 데이터 노출하기

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("test title"),
        ),
        body: Container(
          child: FutureBuilder(
            future: userList,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                    itemBuilder: (context, index) {
                      return Container(
                        padding: const EdgeInsets.all(10),
                        child: Text(
                            "${snapshot.data[index]["id"]}: ${snapshot.data[index]["username"]}"
                        ),
                      );
                    }
                );
              } else if (snapshot.hasError) {
                return const Center(
                  child: Text("Error"),
                );
              } else {
                return const Center(
                    child: CircularProgressIndicator(
                        strokeWidth: 2,
                    )
                );
              }
            },
          ),
        )
    )

결과물

Flutter 앱에서 YouTube 동영상을 가져와 표시하기 위해 youtube_player_flutter 패키지를 사용할 수 있습니다. 이 패키지는 YouTube 동영상을 임베드할 수 있는 위젯을 제공합니다. 아래는 Flutter 프로젝트에서 YouTube 동영상을 가져와 표시하는 방법을 단계별로 설명합니다.

단계별 가이드

1. 패키지 설치

pubspec.yaml 파일에 youtube_player_flutter 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  youtube_player_flutter: ^8.0.0

2. 패키지 가져오기

Dart 파일에서 youtube_player_flutter 패키지를 가져옵니다.

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

3. YouTube Player Controller 설정

YouTube 동영상을 제어할 수 있는 컨트롤러를 설정합니다. 컨트롤러를 사용하여 동영상을 로드하고 재생합니다.

유튜브 삽입 코드

static String youtubeId = 't5Vj0jeYeEE';

final YoutubePlayerController _con = YoutubePlayerController(
  initialVideoId: youtubeId,
  flags: const YoutubePlayerFlags(
      autoPlay: false
  )
);

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: const Text("test title"),
      ),
      body: Center(
        child: YoutubePlayer(
          controller: _con,
          showVideoProgressIndicator: true,
          onReady: () {
            print('Player is ready.');
          },
        ),
      )
  );
}

Navigator 위젯은 Flutter에서 화면 간의 네비게이션을 관리하는 데 사용됩니다.

Flutter 앱은 일반적으로 여러 화면(Screen)으로 구성되며, 사용자가 다양한 화면 간을 이동할 수 있도록 Navigator를 사용합니다. Navigator는 스택(Stack) 자료구조를 사용하여 화면을 관리합니다.

새로운 화면을 푸시(Push)하고 이전 화면을 팝(Pop)하는 방식으로 작동합니다.

주요 메서드

1. push: 새로운 화면을 스택에 추가합니다.

2. pop: 현재 화면을 스택에서 제거합니다.

3. pushReplacement: 현재 화면을 새 화면으로 교체합니다.

4. pushAndRemoveUntil: 특정 조건에 따라 스택의 모든 화면을 제거하고 새로운 화면을 추가합니다.

5. popUntil: 특정 조건에 따라 스택의 화면을 제거합니다.

현재 페이지에서 새로만든 SecondView 라는 페이지로 이동을 원할 경우

body: Center(
  child: GestureDetector(
    onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => SecondView())
    ),
    child: Container(
      padding: EdgeInsets.all(15),
      color: Colors.blue,
      child: Text("Get Started"),
    ),
  ),
)

이동하는 페이지에서는 다음과 같이 구현할 수 있습니다. 

뒤로가기 아이콘의 onPressed 에 pop() 이라는 메소드로 현재 위로 올라온 페이지를 제거하여 뒤로 가는 방법입니다. 

import 'package:flutter/material.dart';

class SecondView extends StatefulWidget {
  const SecondView({super.key});

  @override
  State<SecondView> createState() => _SecondViewState();
}

class _SecondViewState extends State<SecondView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () => Navigator.of(context).pop(),
          ),
          title: const Text("test title"),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(15),
            color: Colors.blue,
            child: Text("This is the second view"),
          ),
        )
    );
  }
}

다른 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => FirstPage()),
            );
          },
          child: Text('Go Back to First Page'),
        ),
      ),
    );
  }
}

3. pushAndRemoveUntil

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(builder: (context) => ThirdPage()),
              (Route<dynamic> route) => false,
            );
          },
          child: Text('Go to Third Page and remove all previous pages'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

주요 포인트

• push: 새로운 화면을 스택에 추가합니다.

• pop: 현재 화면을 스택에서 제거합니다.

• pushReplacement: 현재 화면을 새 화면으로 교체하고, 이전 화면을 스택에서 제거합니다.

• pushAndRemoveUntil: 특정 조건에 따라 스택의 모든 화면을 제거하고 새로운 화면을 추가합니다.

• popUntil: 특정 조건에 따라 스택의 화면을 제거합니다.

추가 메서드

• canPop: 현재 화면이 스택에서 팝될 수 있는지 확인합니다.

• maybePop: 팝될 수 있는 경우 화면을 팝합니다.

• popAndPushNamed: 현재 화면을 팝하고 새로운 화면을 이름으로 푸시합니다.

• pushNamed: 이름으로 새로운 화면을 푸시합니다.

Navigator 문서

• Navigator 클래스 문서

• MaterialPageRoute 클래스 문서

Flutter에서 버튼은 다양한 스타일과 기능을 제공하는 UI 요소로, 사용자와의 상호작용을 위해 사용됩니다.

주요 버튼 위젯으로는 ElevatedButton, TextButton, OutlinedButton, 그리고 IconButton 등이 있습니다.

각 버튼 위젯은 특정 상황에 맞게 사용될 수 있습니다.

주요 버튼 위젯

1. ElevatedButton

2. TextButton

3. OutlinedButton

4. IconButton

5. FloatingActionButton

1. ElevatedButton

ElevatedButton은 입체적인 디자인을 가진 버튼으로, 주로 액션을 강조할 때 사용됩니다.

주요 속성

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 텍스트).

• style: 버튼의 스타일을 정의합니다.

style: ElevatedButton.styleFrom(
          primary: Colors.blue,
          onPrimary: Colors.white,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        ),

2. TextButton

TextButton은 텍스트만 있는 버튼으로, 보통 중요하지 않은 액션이나 링크를 나타낼 때 사용됩니다.

주요 속성

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 텍스트).

• style: 버튼의 스타일을 정의합니다.

style: TextButton.styleFrom(
          primary: Colors.blue,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        ),

3. OutlinedButton

OutlinedButton은 테두리가 있는 버튼으로, 보통 중요도가 낮은 액션이나 보조적인 작업을 나타낼 때 사용됩니다.

주요 속성

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 텍스트).

• style: 버튼의 스타일을 정의합니다.

style: OutlinedButton.styleFrom(
          primary: Colors.blue,
          side: BorderSide(color: Colors.blue),
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        ),

body: Container(
  child: Column(
    children: [
      Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.yellow
          ),
          onPressed: () => print("ElevatedButton"),
          child: const Text("ElevatedButton"),
        ),
      ),
      Center(
        child: TextButton(
          onPressed: () => print("TextButton"),
          child: const Text("TextButton"),
        ),
      ),
      Center(
        child: OutlinedButton(
          onPressed: () => print("OutlinedButton"),
          child: const Text("OutlinedButton"),
        ),
      )
    ],
  ),
)

4. IconButton

IconButton은 아이콘을 표시하는 버튼으로, 주로 툴바나 내비게이션 바에 사용됩니다.

주요 속성

• icon: 버튼 내에 표시될 아이콘.

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• tooltip: 버튼에 마우스를 올렸을 때 표시될 툴팁.

IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        print('Search button clicked');
      },
      tooltip: 'Search',
    ),

5. FloatingActionButton

FloatingActionButton은 떠 있는 액션 버튼으로, 화면의 주요 액션을 나타내는 데 사용됩니다.

주요 속성

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 아이콘).

floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('FloatingActionButton clicked');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),

주요 포인트

• ElevatedButton: 입체적이고 주요 액션을 강조하는 버튼입니다.

• TextButton: 텍스트만 있는 버튼으로, 중요하지 않은 액션이나 링크를 나타낼 때 사용합니다.

• OutlinedButton: 테두리가 있는 버튼으로, 보조적인 작업을 나타낼 때 사용됩니다.

• IconButton: 아이콘을 표시하는 버튼으로, 툴바나 내비게이션 바에 사용됩니다.

• FloatingActionButton: 주요 액션을 나타내는 떠 있는 버튼입니다.

Gradient는 Flutter에서 다양한 색상 변화를 적용할 수 있는 도구입니다.

Gradient 클래스를 사용하면 위젯에 부드러운 색상 전환 효과를 줄 수 있습니다.

Gradient의 주요 형태는 선형 그라디언트 (LinearGradient), 방사형 그라디언트 (RadialGradient), 그리고 대각선 그라디언트 (SweepGradient)가 있습니다.

주요 Gradient 종류

1. LinearGradient

2. RadialGradient

3. SweepGradient

1. LinearGradient

LinearGradient는 시작점과 끝점을 따라 색상이 선형으로 변화하는 그라디언트입니다.

주요 속성

• colors: 그라디언트에 사용될 색상 배열.

• begin: 그라디언트의 시작점.

• end: 그라디언트의 끝점.

• stops: 각 색상의 위치를 지정하는 배열 (선택적).

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  decoration: BoxDecoration(
    gradient: buildLinearGradient()
    
  ),
),

LinearGradient buildLinearGradient() {
    return LinearGradient(
          colors: [
            Colors.blue[100] as Color,
            Colors.blue[300] as Color,
            Colors.blue[500] as Color,
          ],
          // 왼쪽에서 오른쪽이 degault
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter
        );
  }

2. RadialGradient

RadialGradient는 중심점에서 방사형으로 퍼지는 그라디언트입니다.

주요 속성

• colors: 그라디언트에 사용될 색상 배열.

• center: 그라디언트의 중심점.

• radius: 그라디언트의 반지름.

• stops: 각 색상의 위치를 지정하는 배열 (선택적).

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  decoration: BoxDecoration(
    // gradient: buildLinearGradient()
    gradient: RadialGradient(
      center: Alignment.center,
      colors: [
        Colors.blue[100] as Color,
        Colors.blue[300] as Color,
        Colors.blue[500] as Color,
      ],
      radius: 1.0
    )
  ),
)

3. SweepGradient

SweepGradient는 중심점에서 시작하여 시계 방향으로 색상이 변하는 그라디언트입니다.

주요 속성

• colors: 그라디언트에 사용될 색상 배열.

• center: 그라디언트의 중심점.

• startAngle: 그라디언트가 시작되는 각도 (라디안 단위).

• endAngle: 그라디언트가 끝나는 각도 (라디안 단위).

• stops: 각 색상의 위치를 지정하는 배열 (선택적).

SweepGradient(
      colors: [Colors.red, Colors.blue, Colors.green],
      center: Alignment.center,
      startAngle: 0.0,
      endAngle: 3.14,
    )

주요 포인트

• LinearGradient: 선형으로 색상이 변화합니다. 시작점과 끝점을 설정할 수 있습니다.

• RadialGradient: 중심점에서 방사형으로 색상이 퍼집니다. 중심점과 반지름을 설정할 수 있습니다.

• SweepGradient: 중심점에서 시작하여 시계 방향으로 색상이 변화합니다. 중심점, 시작 각도, 끝 각도를 설정할 수 있습니다.

• colors: 그라디언트에 사용될 색상 배열입니다.

• stops: 각 색상의 위치를 지정하는 배열로, 색상이 위치를 명확히 제어할 수 있습니다.

Gradient 문서

• LinearGradient 클래스 문서

• RadialGradient 클래스 문서

• SweepGradient 클래스 문서

Flexible 위젯은 Flutter에서 부모 위젯의 공간을 자식 위젯이 유연하게 사용할 수 있도록 조정하는 레이아웃 위젯입니다. 주로 Row, Column, Flex와 같은 부모 위젯 내에서 사용됩니다. 자식 위젯이 부모 위젯의 공간을 얼마나 차지할지 결정할 수 있습니다.

주요 속성

1. flex: 자식 위젯이 차지할 공간의 비율을 지정합니다. 기본값은 1입니다.

2. fit: 자식 위젯이 남은 공간을 채우는 방식입니다. 기본값은 FlexFit.loose입니다.

FlexFit 옵션

• FlexFit.loose: 자식 위젯이 최소한의 공간을 차지합니다.

• FlexFit.tight: 자식 위젯이 가능한 모든 공간을 차지합니다.

body: Container(
  child: Row(
    children: [
      Flexible(
        flex: 1,
        child: Container(
          color: Colors.lightBlue,
        )
      ),
      Flexible(
          flex: 1,
          child: Container(
            color: Colors.yellow,
          )
      ),
    ],
  ),
)

주요 포인트

1. flex 속성: flex 속성은 자식 위젯이 부모 위젯의 공간을 얼마나 차지할지 비율로 지정합니다.

flex 값이 예를 들어 각각 1, 2, 3으로 설정되어 있어 전체 높이가 6 등분으로 나눠지고, 각 컨테이너가 차지하는 공간은 1/6, 2/6, 3/6입니다.

2. fit 속성: fit 속성은 자식 위젯이 남은 공간을 채우는 방식을 지정합니다.

• FlexFit.loose: 자식 위젯이 최소한의 공간을 차지합니다.

• FlexFit.tight: 자식 위젯이 가능한 모든 공간을 차지합니다.

Flexible과 Expanded 비교

Flexible과 Expanded는 비슷한 역할을 하지만, Expanded는 Flexible을 더 엄격하게 적용한 것입니다.

body: Container(
  child: Column(
    children: [
      Expanded(
        flex: 1,
        child: Container(
          color: Colors.lightBlue,
        )
      ),
      Expanded(
        flex: 1,
        child: Container(
          color: Colors.yellow,
        )
      ),
    ],
  ),
),

mage 위젯은 Flutter에서 이미지를 표시하는 가장 기본적인 위젯입니다. 다양한 이미지 소스에서 이미지를 가져올 수 있도록 지원합니다. 여기서는 NetworkImage를 사용하여 네트워크에서 이미지를 가져와 표시하는 예제에 대해 설명합니다.

주요 속성

• image: 이미지 소스를 지정합니다. NetworkImage, AssetImage, FileImage, MemoryImage 등을 사용할 수 있습니다.

• fit: 이미지의 박스 내에서의 배치 방법을 지정합니다. BoxFit 속성을 사용하여 조정합니다.

assets images 보여주기

body: Center(
          child: Image.asset('assets/images/my_image.png'),
        ),

네트워크 이미지 가져오기 예시

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: Image(
    image: NetworkImage(
      'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg'
    ),
    // fit: BoxFit.fill,
  ),
)

body: Center(
          child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
        ),

속성 설명

1. Image 위젯:

• image: NetworkImage를 사용하여 네트워크 URL에서 이미지를 가져옵니다.

• fit: BoxFit.fill을 사용하여 이미지가 위젯의 박스를 채우도록 합니다.

2. NetworkImage:

• url: 이미지의 URL을 지정합니다. 네트워크에서 이미지를 가져옵니다.

BoxFit 옵션

• BoxFit.fill: 이미지의 원본 비율을 무시하고, 컨테이너를 완전히 채우도록 크기를 조정합니다.

• BoxFit.contain: 이미지의 원본 비율을 유지하면서, 컨테이너 안에 완전히 들어가도록 크기를 조정합니다.

• BoxFit.cover: 이미지의 원본 비율을 유지하면서, 컨테이너를 완전히 덮도록 크기를 조정합니다.

• BoxFit.fitWidth: 이미지의 너비가 컨테이너의 너비에 맞춰지도록 크기를 조정합니다. 높이는 원본 비율을 유지합니다.

• BoxFit.fitHeight: 이미지의 높이가 컨테이너의 높이에 맞춰지도록 크기를 조정합니다. 너비는 원본 비율을 유지합니다.

• BoxFit.none: 이미지의 크기를 조정하지 않고, 원본 크기를 유지합니다.

• BoxFit.scaleDown: 이미지의 크기를 원본 비율을 유지하면서 컨테이너에 맞도록 축소합니다.

예제 변경: BoxFit 옵션 비교

body: Column(
          children: <Widget>[
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.fill,
              ),
            ),
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.contain,
              ),
            ),
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ]

요약

• Image 위젯: Flutter에서 이미지를 표시하는 기본 위젯입니다.

• NetworkImage: 네트워크 URL에서 이미지를 가져오는 이미지 프로바이더입니다.

• BoxFit: 이미지를 컨테이너 내에서 어떻게 맞출지 결정하는 속성입니다. 다양한 옵션을 통해 이미지의 배치 방법을 조정할 수 있습니다.

문서 참고

• Image 클래스 문서

• NetworkImage 클래스 문서

• BoxFit 클래스 문서

AlertDialog 위젯은 Flutter에서 사용자에게 중요한 정보를 알리거나 선택을 요구할 때 사용하는 팝업 창입니다. 일반적으로 제목, 본문 내용, 액션 버튼(예: 확인, 취소)을 포함합니다.

주요 속성

• title: 대화 상자의 제목을 설정합니다.

• content: 대화 상자의 본문 내용을 설정합니다.

• actions: 사용자가 선택할 수 있는 버튼 목록을 설정합니다.

• shape: 대화 상자의 모양을 설정합니다.

• backgroundColor: 대화 상자의 배경색을 설정합니다.

• elevation: 대화 상자의 그림자 깊이를 설정합니다.

예시 

body: Container(
  child: Center(
    child: TextButton(
      onPressed: () {
        showDialog(
            context: context,
            builder: (BuildContext con) {
              return AlertDialog(
                title: const Text("Dialog Title"),
                content: Container(
                  child: const Text("Dialog Content"),
                ),
                actions: [
                  TextButton(
                      onPressed: () => Navigator.of(context).pop(), 
                      child: const Text("Close")
                  )
                ],
              );
            }
        );
      },
      child: const Text("팝업 버튼"),
    ),

  ),
),

다른예시

사용자 정의 AlertDialog

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('Custom AlertDialog Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _showCustomDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Custom Alert"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("This is a custom alert dialog."),
              SizedBox(height: 20),
              FlutterLogo(size: 50),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => _showCustomDialog(context),
      child: Text('Show Custom AlertDialog'),
    );
  }
}

주요 포인트

• title: 대화 상자의 제목을 설정합니다. 일반적으로 Text 위젯을 사용합니다.

• content: 대화 상자의 본문 내용을 설정합니다. Text 위젯 또는 다른 복합 위젯을 사용할 수 있습니다.

• actions: 대화 상자의 하단에 위치하는 버튼 목록을 설정합니다. TextButton 또는 ElevatedButton 등을 사용합니다.

• showDialog: 대화 상자를 화면에 표시하는 함수입니다.

• context: 대화 상자를 표시할 컨텍스트입니다.

• builder: 대화 상자를 빌드하는 함수입니다. AlertDialog 위젯을 반환합니다.

• Navigator.of(context).pop(): 대화 상자를 닫는 함수입니다.

AlertDialog 문서

• AlertDialog 클래스 문서: AlertDialog 클래스 문서

• showDialog 함수 문서: showDialog 함수 문서