[flutter] DropdownButton 위젯의 아이템에 링크 추가하기

08 Dec 2023

flutter

Flutter에서 DropdownButton은 목록에서 항목을 선택할 때 사용되는 유용한 위젯입니다. 그러나 기본적으로 DropdownButton 위젯의 각 항목은 텍스트만 포함할 수 있습니다. 하지만 사용자가 DropdownButton의 항목을 선택하면 연관된 링크로 이동하도록 하는 기능을 추가하고 싶다면 어떻게 할까요?

DropdownButton 위젯에 아이템에 링크 추가하기

DropdownButton 위젯의 항목에 링크를 추가하려면 DropdownMenuItem을 사용하여 각 항목을 구성하고 해당 항목을 선택할 때 이동할 링크를 정의해야 합니다.

아래 예시 코드는 DropdownButton 위젯에 아이템에 링크를 추가하는 방법을 보여줍니다.

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('DropdownButton with Links'),
        ),
        body: Center(
          child: DropdownButton<String>(
            items: [
              DropdownMenuItem(
                value: 'google',
                child: Text('Google'),
              ),
              DropdownMenuItem(
                value: 'yahoo',
                child: Text('Yahoo'),
              ),
            ],
            onChanged: (String? value) {
              if (value == 'google') {
                // Open Google link
                // Add your navigation code here
              } else if (value == 'yahoo') {
                // Open Yahoo link
                // Add your navigation code here
              }
            },
          ),
        ),
      ),
    );
  }
}

추가적인 작업

위의 코드에서 onChanged 콜백 함수 내에서 각 항목에 링크를 추가하기 위해 해당 링크로 이동하는 내비게이션 코드를 추가해야 합니다. 예를 들어, google 항목을 선택하면 구글 링크로 이동하고, yahoo 항목을 선택하면 야후 링크로 이동하는 코드를 추가해야 합니다.

결론

Flutter의 DropdownButton 위젯에 항목에 링크를 추가하는 방법에 대해 알아보았습니다. DropdownMenuItem을 사용하여 항목을 구성하고 해당 항목을 선택할 때 이동할 링크를 정의하여 DropdownButton의 각 항목에 링크를 추가할 수 있습니다.

이러한 기능을 사용하여 앱에서 사용자가 쉽게 필요한 링크로 이동할 수 있도록 만들 수 있습니다.

참고 문헌:

Flutter DropdownButton 공식 문서: Flutter DropdownButton