FreekakeApp/lib/screen/collection/collection_caracter_screen.dart

import 'package:flutter/material.dart';
import 'package:freekake/components/collection_container.dart';
import 'package:freekake/screen/collection/character_view.dart';

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

  @override
  State<CollectionCaraterScreen> createState() =>
      _CollectionCaraterScreenState();
}

class _CollectionCaraterScreenState extends State<CollectionCaraterScreen> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 80),
          Padding(
            padding: EdgeInsets.all(40),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Favorite",
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Divider(height: 20, color: Colors.transparent),
                SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    // alignment: WrapAlignment.spaceAround,
                    spacing: 10, // Horizontal spacing between the containers
                    // runSpacing: 10, // Vertical spacing between lines
                    children: [
                      CollectionContainer(
                        label: "Cepot",
                        imagesrc: 'assets/images/cepott.png',
                        colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
                        onTapAc:
                            () => {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder:
                                      (context) => CharacterView(
                                        title: "Tentang Cepot",
                                        imagePath: 'assets/images/cepott.png',
                                        charName: "Cepot",
                                        charSex: "Laki-laki",
                                        charOrigin: "Jawa Barat",
                                        content:
                                            """Cepot adalah sosok yang begitu menarik—aneh, ceria, dan penuh kejutan! 
                                            Ia muncul seperti tokoh dari dongeng lama yang lupa pulang ke rumah, dengan wajah merah seperti apel matang, 
                                            hidung besar yang tampak siap mencium rahasia, dan mata bulat yang selalu bersinar penuh rasa ingin tahu. Ia suka tertawa keras, 
                                            suka bermain-main dengan kata-kata, dan sangat pandai membuat siapa pun merasa nyaman di dekatnya. \nMeski kadang terlihat konyol, 
                                            Cepot sebenarnya sangat cerdik—ia tahu kapan harus berbicara, kapan harus diam, dan yang paling penting, ia tahu bagaimana menghibur 
                                            orang-orang yang sedang sedih. \nAnak-anak menyukainya, orang tua menghormatinya, dan tak jarang hewan-hewan kecil pun tampak betah 
                                            duduk di dekatnya saat ia bercerita.
                                                  """,
                                      ),
                                ),
                              ),
                            },
                      ),
                      // CollectionContainer(
                      //   label: "Luffy",
                      //   imagesrc: 'assets/images/luffy.png',
                      //   colorContiner: Color.fromRGBO(12, 199, 215, 1),
                      //   onTapAc: () => {},
                      // ),
                      // CollectionContainer(
                      //   label: "Oni Chan",
                      //   imagesrc: 'assets/images/klipartz.png',
                      //   onTapAc: () => {},
                      // ),
                    ],
                  ),
                ),
                Divider(height: 20, color: Colors.transparent),
                Text(
                  "All",
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Divider(height: 20, color: Colors.transparent),
                SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    // alignment: WrapAlignment.spaceAround,
                    spacing: 10, // Horizontal spacing between the containers
                    // runSpacing: 10, // Vertical spacing between lines
                    children: [
                      // CollectionContainer(
                      //   label: "Luffy",
                      //   imagesrc: 'assets/images/luffy.png',
                      //   colorContiner: Color.fromRGBO(12, 199, 215, 1),
                      //   onTapAc: () => {},
                      // ),
                      // CollectionContainer(
                      //   label: "Oni Chan",
                      //   imagesrc: 'assets/images/klipartz.png',
                      //   onTapAc: () => {},
                      // ),
                      CollectionContainer(
                        label: "Cepot",
                        imagesrc: 'assets/images/cepott.png',
                        colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
                        onTapAc:
                            () => {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder:
                                      (context) => CharacterView(
                                        title: "Tentang Cepot",
                                        imagePath: 'assets/images/cepott.png',
                                        charName: "Cepot",
                                        charSex: "Laki-laki",
                                        charOrigin: "Jawa Barat",
                                        content: """
                                            Cepot adalah sosok yang begitu menarik—aneh, 
                                            ceria, dan penuh kejutan! Ia muncul seperti 
                                            tokoh dari dongeng lama yang lupa pulang ke rumah,
                                             dengan wajah merah seperti apel matang, 
                                             hidung besar yang tampak siap 
                                             mencium rahasia, dan mata bulat 
                                             yang selalu bersinar penuh rasa ingin 
                                             tahu. Ia suka tertawa keras, suka bermain-main dengan kata-kata, dan sangat 
                                             pandai membuat siapa pun merasa nyaman di dekatnya. \nMeski kadang terlihat konyol, 
                                             Cepot sebenarnya sangat cerdik—ia tahu kapan harus berbicara, kapan harus diam, dan 
                                             yang paling penting, ia tahu bagaimana menghibur orang-orang yang sedang sedih. \nAnak-anak 
                                             menyukainya, orang tua menghormatinya, dan tak jarang hewan-hewan kecil pun tampak betah duduk 
                                             di dekatnya saat ia bercerita.
                                                  """,
                                      ),
                                ),
                              ),
                            },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}