[flutter] 플러터 Wrap을 사용하여 앱의 소셜 미디어 공유 기능을 구현하는 방법

07 Dec 2023

flutter

앱 개발 중에는 사용자가 앱에서 컨텐츠를 소셜 미디어에 공유하는 기능이 필요할 때가 있습니다. 이를 위해 Flutter에서는 Wrap 위젯을 사용하여 다양한 소셜 미디어 공유 버튼을 구현할 수 있습니다.

Wrap 위젯 사용하기

Wrap 위젯은 자식 위젯들을 가로로 늘어놓는 데 사용되며, 필요에 따라 자동으로 줄바꿈을 처리합니다. 이를 활용하여 여러 소셜 미디어 공유 버튼을 한 줄에 나열할 수 있습니다.

Wrap(
  spacing: 8.0, // 각 버튼간의 간격 설정
  runSpacing: 8.0, // 각 줄간의 간격 설정
  children: [
    FlatButton.icon(
      onPressed: () {
        // 페이스북 공유 기능 구현
      },
      icon: Icon(Icons.facebook),
      label: Text('Facebook 공유'),
    ),
    FlatButton.icon(
      onPressed: () {
        // 인스타그램 공유 기능 구현
      },
      icon: Icon(Icons.instagram),
      label: Text('Instagram 공유'),
    ),
    FlatButton.icon(
      onPressed: () {
        // 트위터 공유 기능 구현
      },
      icon: Icon(Icons.twitter),
      label: Text('Twitter 공유'),
    ),
    // 추가적인 소셜 미디어 버튼들
  ],
)

위 코드에서는 Wrap 위젯을 사용하여 FlatButton.icon 위젯을 가로로 나열하고 있습니다. spacing과 runSpacing 속성을 사용하여 각 버튼 및 줄간의 간격을 조정할 수 있습니다. 각 버튼의 onPressed 함수에는 해당 소셜 미디어의 공유 기능을 구현하는 코드를 작성해야 합니다.

참고 자료

Wrap class - Flutter API