update 01

This commit is contained in:
='fauz
2025-05-08 13:16:02 +07:00
parent ee9c2ce4a4
commit d9bedf51a9
13 changed files with 710 additions and 284 deletions
+38 -11
View File
@@ -1,17 +1,23 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freekake/components/characcter_info.dart';
class CharacterView extends StatefulWidget {
final String title;
final String imagePath;
final String content;
// caracter info
final String charName;
final String charOrigin;
final String charSex;
const CharacterView({
super.key,
required this.title,
required this.imagePath,
required this.content,
required this.charName,
required this.charSex,
required this.charOrigin,
});
@override
@@ -19,47 +25,68 @@ class CharacterView extends StatefulWidget {
}
class _CharacterViewState extends State<CharacterView> {
String _content = '';
late String _content;
late String _charName;
late String _charOrigin;
late String _charSex;
@override
void initState() {
super.initState();
_content = widget.content;
_charName = widget.charName;
_charSex = widget.charSex;
_charOrigin = widget.charOrigin;
}
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Color.fromARGB(225, 79, 76, 182),
backgroundColor: const Color.fromARGB(255, 79, 76, 182),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Gambar 1/3 dari tinggi layar
SizedBox(
height: 10,
height: 20,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
),
color: Color.fromARGB(225, 79, 76, 182),
color: Color.fromARGB(255, 79, 76, 182),
),
),
),
const SizedBox(height: 0),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: screenHeight / 2,
width: double.infinity,
child: Image.asset(widget.imagePath, fit: BoxFit.fitHeight),
),
),
// Konten text scrollable
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.only(left: 18.0, right: 18, bottom: 18),
child: Text(_content),
padding: const EdgeInsets.all(18.0),
child: CharacterInfo(
nama: _charName,
kelamin: _charSex,
asal: _charOrigin,
content: _content,
),
),
),
],
),
// ),
);
}
}
@@ -1,5 +1,6 @@
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});
@@ -22,32 +23,14 @@ class _CollectionCaraterScreenState extends State<CollectionCaraterScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Favorite", style: TextStyle(color: Colors.black)),
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: () => {},
),
],
Text(
"Favorite",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
Divider(height: 20, color: Colors.transparent),
Text("All", style: TextStyle(color: Colors.black)),
Divider(height: 20, color: Colors.transparent),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
@@ -55,22 +38,94 @@ class _CollectionCaraterScreenState extends State<CollectionCaraterScreen> {
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: () => {},
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.
""",
),
),
),
},
),
],
),
@@ -27,14 +27,14 @@ class _CollectionFragmentScreenState extends State<CollectionFragmentScreen> {
spacing: 10, // Horizontal spacing between the containers
runSpacing: 10, // Vertical spacing between lines
children: [
// CollectionContainer(
// label: "Luffy",
// imagesrc: 'assets/images/ft_luffy.png',
// onTapAc: () => {},
// colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
// ),
CollectionContainer(
label: "Luffy",
imagesrc: 'assets/images/ft_luffy.png',
onTapAc: () => {},
colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
),
CollectionContainer(
label: "Oni Chan",
label: "Cepot",
imagesrc: 'assets/images/ft_cepot.png',
onTapAc: () => {},
colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:freekake/components/collection_container.dart';
import 'package:freekake/screen/collection/character_view.dart';
import 'package:freekake/screen/collection/skin_view.dart';
class CollectionSkinScreen extends StatefulWidget {
const CollectionSkinScreen({super.key});
@@ -23,53 +25,70 @@ class _CollectionSkinScreenState extends State<CollectionSkinScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Luffy", style: TextStyle(color: Colors.black)),
Divider(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
spacing: 10, // Horizontal spacing between the containers
children: [
CollectionContainer(
label: "Luffy Kimono",
imagesrc: 'assets/images/luffy-kimono.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
// Text("Luffy", style: TextStyle(color: Colors.black)),
// Divider(height: 10),
// SingleChildScrollView(
// scrollDirection: Axis.horizontal,
// child: Row(
// spacing: 10, // Horizontal spacing between the containers
// children: [
// CollectionContainer(
// label: "Luffy Kimono",
// imagesrc: 'assets/images/luffy-kimono.png',
// colorContiner: Color.fromRGBO(12, 199, 215, 1),
// onTapAc: () => {},
// ),
CollectionContainer(
label: "Luffy (Default)",
imagesrc: 'assets/images/luffy.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
CollectionContainer(
label: "Luffy King",
imagesrc: 'assets/images/luffy-king.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
],
),
),
Divider(height: 20, color: Colors.transparent),
Text("Others", style: TextStyle(color: Colors.black)),
// CollectionContainer(
// label: "Luffy (Default)",
// imagesrc: 'assets/images/luffy.png',
// colorContiner: Color.fromRGBO(12, 199, 215, 1),
// onTapAc: () => {},
// ),
// CollectionContainer(
// label: "Luffy King",
// imagesrc: 'assets/images/luffy-king.png',
// colorContiner: Color.fromRGBO(12, 199, 215, 1),
// onTapAc: () => {},
// ),
// ],
// ),
// ),
// Divider(height: 20, color: Colors.transparent),
Text("Cepot", style: TextStyle(color: Colors.black)),
Divider(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
spacing: 10,
children: [
CollectionContainer(
label: "Oni Chan (Default)",
imagesrc: 'assets/images/klipartz.png',
onTapAc: () => {},
),
// CollectionContainer(
// label: "Oni Chan (Default)",
// imagesrc: 'assets/images/klipartz.png',
// onTapAc: () => {},
// ),
CollectionContainer(
label: "Cepot (Default)",
imagesrc: 'assets/images/cepott.png',
colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
onTapAc: () => {},
onTapAc:
() => {
Navigator.push(
context,
MaterialPageRoute(
builder:
(context) => SkinView(
title: "Tentang Skin",
imagePath: 'assets/images/cepott.png',
skinName: "Pangsi",
skinOrigin: "Jawa Barat",
content:
"""Pakaian Cepot juga punya makna, lho! Ia selalu memakai baju pangsi hitam panjang yang sederhana, melambangkan kesederhanaan dan kerendahan hati. \nBaju ini longgar dan nyaman, cocok untuk Cepot yang suka bergerak bebas dan menghibur orang-orang di sekitarnya. \nSarung kotak-kotak yang dililit di pinggang bukan hanya pelengkap, tapi juga simbol budaya rakyat biasa yang tetap rapi dan terhormat. \nDan jangan lupa iket batik di kepalanya—itu bukan cuma hiasan, tapi lambang kebanggaan dan identitas sebagai orang Sunda. Lewat pakaiannya, Cepot mengajarkan kita bahwa kita tidak perlu pakaian mahal untuk terlihat hebat. Yang penting adalah sikap baik, rasa hormat pada budaya, dan keberanian untuk jadi diri sendiri!
""",
),
),
),
},
),
],
),
+87
View File
@@ -0,0 +1,87 @@
import 'package:flutter/material.dart';
import 'package:freekake/components/characcter_info.dart';
import 'package:freekake/components/skin_info.dart';
class SkinView extends StatefulWidget {
final String title;
final String imagePath;
final String content;
// caracter info
final String skinName;
final String skinOrigin;
const SkinView({
super.key,
required this.title,
required this.imagePath,
required this.content,
required this.skinName,
required this.skinOrigin,
});
@override
_SkinViewState createState() => _SkinViewState();
}
class _SkinViewState extends State<SkinView> {
late String _content;
late String _skinName;
late String _skinOrigin;
@override
void initState() {
super.initState();
_content = widget.content;
_skinName = widget.skinName;
_skinOrigin = widget.skinOrigin;
}
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(widget.title),
backgroundColor: const Color.fromARGB(255, 79, 76, 182),
),
body: Column(
children: [
SizedBox(
height: 20,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
),
color: Color.fromARGB(255, 79, 76, 182),
),
),
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: screenHeight / 2,
width: double.infinity,
child: Image.asset(widget.imagePath, fit: BoxFit.fitHeight),
),
),
// Konten text scrollable
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(18.0),
child: SkinInfo(
nama: _skinName,
asal: _skinOrigin,
content: _content,
),
),
),
],
),
);
}
}