[Flutter] Modal_bottom_sheet 패키지를 사용해보자

modal_bottom_sheet

modal_bottom_sheet 패키지는 다양한 환경에서 유용하게 활용할 수 있는 패키지입니다.

내용을 공유할 때, 혹은 게시글을 편집하고자 할 때, 아니면 다른 게시글 목록을 보고자 할 때 등 여러 방면에서 활용할 수 있습니다.

 

실제로 이 내용을 표시하도록 일일이 작업하려면 많은 노력이 필요하지만 플러터에서는 이 모든 것이 하나의 패키지 안에 포함되어 있습니다. modal_bottom_sheet 패키지를 잘만 활용한다면 더 퀄리티 있는 앱을 개발할 수 있을 것입니다.

예시 코드 및 결과

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class BottomSheetPractice extends StatefulWidget {
  const BottomSheetPractice({Key? key}) : super(key: key);

  @override
  State<BottomSheetPractice> createState() => _BottomSheetPracticeState();
}

class _BottomSheetPracticeState extends State<BottomSheetPractice> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: List.generate(animalList.length, (index) =>
            AnimalCard(animal: animalList[index])
        )
      )
    );
  }
}

class AnimalCard extends StatelessWidget {
  final Animal animal;
  const AnimalCard({required this.animal, Key? key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 16, 8, 0),
      child: GestureDetector(
        onTap: () => openBottomSheetWithInfo(context, animal),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16.0),
          child: Image.network(animal.photo),
        ),
      ),
    );
  }

	// This function executed when you tap AnimalCard
  void openBottomSheetWithInfo(BuildContext context, Animal animal) {

    // Set showModalBottomSheet()
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,

      // Set builder function
      builder: (BuildContext context) {
        return BottomSheet(animal: animal);
      },
    );
  }
}

class BottomSheet extends StatelessWidget {
  final Animal animal;
  const BottomSheet({required this.animal, Key? key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 600,
      child: ListView(
        shrinkWrap: true,
        children: [
          Image.network(animal.photo),
          const SizedBox(height: 10),
          Text(animal.name,
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontSize: 25.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(animal.desc,
              style: const TextStyle(
                fontSize: 18.0,
              ),
            ),
          )
        ],
      )
    );
  }
}

class Animal {
  final String name;
  final String photo;
  final String desc;
  Animal(this.name, this.photo, this.desc);
}

final animalList = <Animal>[
  Animal(
      'Cat',
      "https://firebasestorage.googleapis.com/v0/b/new-ml-6c02d.appspot.com/o/Course2_Microproject%2CExam_image%2Fcat1.png?alt=media&token=c76655de-b6c9-4a22-a5f5-0ce383baa21f",
      "The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat, or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to kill rodents. About 60 cat breeds are recognized by various cat registries."),
  Animal(
      'Tiger',
      "https://firebasestorage.googleapis.com/v0/b/new-ml-6c02d.appspot.com/o/Course2_Microproject%2CExam_image%2Ftiger1.png?alt=media&token=3f62f0fc-ba87-4d61-bca0-ec3a18444df3",
      "The Bengal tiger (also known as the Bengal tiger Panthera tigris or Bengal tiger) is a subspecies of the tiger, distributed in Sundarbans, Nepal, India, and Bangladesh. It is brown with black striped fur. But the mutant white tiger is white with brown stripes. Based on the male Bengal tiger, the total length is 2.4~3.6m, the weight is 140~320kg, and the average weight of the male Bengal tiger is 230kg. The fur is short and is purple. Among the tiger subspecies, it is the second largest after the Siberian tiger and has the largest population, accounting for more than 70%. (However, the largest subspecies of wild populations have become Bengal tigers, as the number of Siberian tigers has decreased due to the only overfishing of wild populations.)"),
];

예시 코드 결과

 

https://pub.dev/packages/modal_bottom_sheet#-installing-tab-

modal_bottom_sheet | Flutter Package