update 01
This commit is contained in:
parent
ee9c2ce4a4
commit
d9bedf51a9
@ -3,8 +3,20 @@ import 'package:flutter/material.dart';
|
||||
class CardList extends StatelessWidget {
|
||||
final String title;
|
||||
final String body;
|
||||
final String? gambar;
|
||||
final String? tipe;
|
||||
final String? point;
|
||||
final String? coint;
|
||||
|
||||
const CardList({super.key, required this.title, required this.body});
|
||||
const CardList({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.body,
|
||||
this.gambar,
|
||||
this.tipe,
|
||||
this.point,
|
||||
this.coint,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -21,7 +33,15 @@ class CardList extends StatelessWidget {
|
||||
borderRadius: BorderRadius.circular(
|
||||
10.0,
|
||||
), // Opsional: membuat gambar lebih rounded
|
||||
child: Image.asset(
|
||||
child:
|
||||
(gambar != null)
|
||||
? Image.asset(
|
||||
gambar!,
|
||||
width: 65, // Atur ukuran gambar
|
||||
height: 80,
|
||||
fit: BoxFit.cover,
|
||||
)
|
||||
: Image.asset(
|
||||
'assets/images/cepott.png',
|
||||
width: 80, // Atur ukuran gambar
|
||||
height: 120,
|
||||
@ -54,18 +74,54 @@ class CardList extends StatelessWidget {
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(0.08),
|
||||
child: const Row(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text("50"),
|
||||
Chip(
|
||||
labelPadding: EdgeInsets.symmetric(
|
||||
horizontal: 0,
|
||||
vertical: 0,
|
||||
),
|
||||
label: Text(
|
||||
point ?? '200',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
backgroundColor: Colors.blue,
|
||||
),
|
||||
SizedBox(width: 40),
|
||||
Text("100"),
|
||||
Chip(
|
||||
labelPadding: EdgeInsets.symmetric(
|
||||
horizontal: 0,
|
||||
vertical: 0,
|
||||
),
|
||||
label: Text(
|
||||
coint ?? "100",
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
backgroundColor: Colors.blue,
|
||||
),
|
||||
],
|
||||
),
|
||||
Text("Quiz"),
|
||||
Chip(
|
||||
labelPadding: EdgeInsets.symmetric(
|
||||
horizontal: 0,
|
||||
vertical: 0,
|
||||
),
|
||||
label: Text(
|
||||
tipe ?? "Text",
|
||||
style: TextStyle(color: Colors.white, fontSize: 14),
|
||||
),
|
||||
backgroundColor: Colors.blue,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
142
lib/components/characcter_info.dart
Normal file
142
lib/components/characcter_info.dart
Normal file
@ -0,0 +1,142 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class CharacterInfo extends StatelessWidget {
|
||||
final String nama;
|
||||
final String kelamin;
|
||||
final String asal;
|
||||
final String content;
|
||||
|
||||
const CharacterInfo({
|
||||
super.key,
|
||||
required this.nama,
|
||||
required this.kelamin,
|
||||
required this.asal,
|
||||
required this.content,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
"Nama Karakter",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
":",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
nama,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
"Jenis Kelamin",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
":",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
kelamin,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
"Asal Karakter",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
":",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
asal,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
Text(
|
||||
content,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
7
lib/components/menu_item.dart
Normal file
7
lib/components/menu_item.dart
Normal file
@ -0,0 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class MenuItem {
|
||||
const MenuItem({required this.text, required this.icon});
|
||||
final String text;
|
||||
final IconData icon;
|
||||
}
|
||||
104
lib/components/skin_info.dart
Normal file
104
lib/components/skin_info.dart
Normal file
@ -0,0 +1,104 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class SkinInfo extends StatelessWidget {
|
||||
final String nama;
|
||||
final String asal;
|
||||
final String content;
|
||||
|
||||
const SkinInfo({
|
||||
super.key,
|
||||
required this.nama,
|
||||
required this.asal,
|
||||
required this.content,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
"Nama Pakaian",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
":",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
nama,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
"Daerah Asal",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
":",
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Text(
|
||||
asal,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
Text(
|
||||
content,
|
||||
style: const TextStyle(
|
||||
letterSpacing: 0.2,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
|
||||
import 'package:freekake/components/bottom_navbar.dart';
|
||||
import 'package:freekake/components/buildcard_info.dart';
|
||||
import 'package:freekake/components/main_menu.dart';
|
||||
import 'package:freekake/components/menu_item.dart';
|
||||
import 'package:freekake/components/scan_button.dart';
|
||||
|
||||
class HomeScreen extends StatefulWidget {
|
||||
@ -13,9 +14,7 @@ class HomeScreen extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _HomeScreenState extends State<HomeScreen> {
|
||||
final String username = "User01";
|
||||
final double _sliderValue = 0.0;
|
||||
static const Color transparent = Color(0xFFFFFFFF);
|
||||
final String username = "luffy01";
|
||||
// Image image
|
||||
|
||||
@override
|
||||
@ -26,57 +25,8 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
final buttonScanSize = screenWidth * 0.20;
|
||||
final double bottomPadding = (9000 / screenWidth).clamp(0, 0.2);
|
||||
double bottomOffset = -(screenWidth * 0.25) + 180;
|
||||
double sunRiseCurve(double width) {
|
||||
// kamu bisa mainin fungsi ini sesuka hati
|
||||
return -((400 / width) * 100); // semakin kecil width, hasil makin negatif
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
// appBar: AppBar(
|
||||
// elevation: 0,
|
||||
// backgroundColor: Color(0x00000000),
|
||||
// title: Row(
|
||||
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
// children: [
|
||||
// Row(
|
||||
// children: [
|
||||
// Text(
|
||||
// username,
|
||||
// style: const TextStyle(
|
||||
// fontSize: 18,
|
||||
// fontWeight: FontWeight.bold,
|
||||
// ),
|
||||
// ),
|
||||
// SizedBox(width: 10),
|
||||
// IconButton(
|
||||
// icon: Icon(Icons.emoji_events, color: Color(0xFFE32087)),
|
||||
// onPressed: () {},
|
||||
// ),
|
||||
// Text(
|
||||
// "5000",
|
||||
// style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// Row(
|
||||
// children: [
|
||||
// IconButton(
|
||||
// icon: Icon(Icons.monetization_on, color: Color(0xFFE32087)),
|
||||
// onPressed: () {},
|
||||
// ),
|
||||
// Text(
|
||||
// "1.300",
|
||||
// style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
// ),
|
||||
// // IconButton(
|
||||
// // icon: Image.asset("images/icon.png", width: 24),
|
||||
// // onPressed: () {},
|
||||
// // ),
|
||||
// ],
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// ),
|
||||
body: homeBody(
|
||||
context,
|
||||
isLandscape,
|
||||
@ -110,12 +60,7 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
),
|
||||
),
|
||||
),
|
||||
// Positioned(
|
||||
// top: 0,
|
||||
// left: 0,
|
||||
// right: 0,
|
||||
// child: SizedBox(height: 120, child: TopbarContainer()),
|
||||
// ),
|
||||
|
||||
Positioned(
|
||||
right: 0,
|
||||
top: 100,
|
||||
@ -145,23 +90,11 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
openWithLongPress: false,
|
||||
items: [
|
||||
..._MenuItems.firstItems.map(
|
||||
(item) => DropdownMenuItem<_MenuItem>(
|
||||
(item) => DropdownMenuItem<MenuItem>(
|
||||
value: item,
|
||||
child: _MenuItems.buildItem(item),
|
||||
),
|
||||
),
|
||||
// const DropdownMenuItem<Divider>(
|
||||
// enabled: false,
|
||||
// // height: 8,
|
||||
// child: Divider(),
|
||||
// ),
|
||||
// ..._MenuItems.secondItems.map(
|
||||
// (item) => DropdownMenuItem<_MenuItem>(
|
||||
// value: item,
|
||||
// // height: 48,
|
||||
// child: _MenuItems.buildItem(item),
|
||||
// ),
|
||||
// ),
|
||||
],
|
||||
onChanged: (value) {
|
||||
if (value != null) {
|
||||
@ -250,7 +183,7 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
),
|
||||
),
|
||||
SizedBox(height: 10),
|
||||
setHomeImage("assets/images/luffy.png", 300),
|
||||
setHomeImage("assets/images/cepott.png", 300),
|
||||
],
|
||||
),
|
||||
),
|
||||
@ -268,10 +201,6 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
|
||||
|
||||
Positioned(
|
||||
// bottom: -150, //bottomPadding * 32,
|
||||
// bottom: sunRiseCurve(
|
||||
// screenWidth,
|
||||
// ),
|
||||
bottom:
|
||||
isLandscape
|
||||
? bottomOffset.clamp(-200.0, -50.0)
|
||||
@ -291,29 +220,21 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
}
|
||||
}
|
||||
|
||||
class _MenuItem {
|
||||
const _MenuItem({required this.text, required this.icon});
|
||||
final String text;
|
||||
final IconData icon;
|
||||
}
|
||||
|
||||
class _MenuItems {
|
||||
static const List<_MenuItem> firstItems = [like, share, download];
|
||||
static const List<_MenuItem> secondItems = [cancel];
|
||||
static const like = _MenuItem(text: 'Like', icon: Icons.favorite);
|
||||
static const share = _MenuItem(text: 'Share', icon: Icons.share);
|
||||
static const download = _MenuItem(text: 'Download', icon: Icons.download);
|
||||
static const cancel = _MenuItem(text: 'Cancel', icon: Icons.cancel);
|
||||
static const List<MenuItem> firstItems = [like, share, download];
|
||||
static const List<MenuItem> secondItems = [cancel];
|
||||
static const like = MenuItem(text: 'Like', icon: Icons.favorite);
|
||||
static const share = MenuItem(text: 'Share', icon: Icons.share);
|
||||
static const download = MenuItem(text: 'Download', icon: Icons.download);
|
||||
static const cancel = MenuItem(text: 'Cancel', icon: Icons.cancel);
|
||||
|
||||
static Widget buildItem(_MenuItem item) {
|
||||
static Widget buildItem(MenuItem item) {
|
||||
return Container(
|
||||
height: 30,
|
||||
padding: EdgeInsets.symmetric(vertical: 2),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
children: [
|
||||
// Icon(item.icon, color: Color.fromRGBO(242, 240, 240, 1), size: 22),
|
||||
// const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.text,
|
||||
@ -327,7 +248,7 @@ class _MenuItems {
|
||||
);
|
||||
}
|
||||
|
||||
static void onChanged(BuildContext context, _MenuItem item) {
|
||||
static void onChanged(BuildContext context, MenuItem item) {
|
||||
switch (item) {
|
||||
case _MenuItems.like:
|
||||
//Do something
|
||||
|
||||
@ -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,7 +23,13 @@ class _CollectionCaraterScreenState extends State<CollectionCaraterScreen> {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text("Favorite", style: TextStyle(color: Colors.black)),
|
||||
Text(
|
||||
"Favorite",
|
||||
style: TextStyle(
|
||||
color: Colors.black,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
Divider(height: 20, color: Colors.transparent),
|
||||
SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
@ -31,46 +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: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
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(
|
||||
// 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: () => {},
|
||||
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
lib/screen/collection/skin_view.dart
Normal file
87
lib/screen/collection/skin_view.dart
Normal 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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -42,9 +42,12 @@ class _ListEducationState extends State<ListEducation> {
|
||||
final List<Map<String, dynamic>> _listContent = [
|
||||
{
|
||||
"title": "Taburan Lezat untuk Nasi!",
|
||||
"image": "assets/icons/healthy.svg",
|
||||
"image": "assets/html/furikake/furikake.jpg",
|
||||
"color": "#cdd0ee",
|
||||
"category": "Kesehatan",
|
||||
"type": "Materi",
|
||||
"point": "10",
|
||||
"coint": "100",
|
||||
"body":
|
||||
"""Tahukah kamu bahwa di Jepang ada bumbu tabur yang bisa membuat nasi
|
||||
menjadi lebih enak?
|
||||
@ -53,9 +56,12 @@ class _ListEducationState extends State<ListEducation> {
|
||||
},
|
||||
{
|
||||
"title": "Makan Sehat dengan Gizi Seimbang",
|
||||
"image": "assets/icons/Safety.svg",
|
||||
"image": "assets/html/lemak.png",
|
||||
"color": "#cef1da",
|
||||
"category": "Keselamatan",
|
||||
"type": "Materi",
|
||||
"point": "100",
|
||||
"coint": "20",
|
||||
"body":
|
||||
"""upaya makan kita sehat, ada aturan "Isi Piringku" yang bisa kita ikuti:
|
||||
🍽️ Separuh piring: Sayur dan buah 🍽️ Seperempat piring: Karbohidrat (seperti nasi atau roti)
|
||||
@ -281,7 +287,12 @@ class _ListEducationState extends State<ListEducation> {
|
||||
topRight: Radius.circular(25),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
child: _listCard(context),
|
||||
);
|
||||
}
|
||||
|
||||
Column _listCard(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(height: 5),
|
||||
Padding(
|
||||
@ -308,11 +319,7 @@ class _ListEducationState extends State<ListEducation> {
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 10.0,
|
||||
left: 10,
|
||||
right: 10,
|
||||
),
|
||||
padding: EdgeInsets.only(top: 10.0, left: 10, right: 10),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
@ -327,9 +334,19 @@ class _ListEducationState extends State<ListEducation> {
|
||||
right: 20,
|
||||
left: 20,
|
||||
),
|
||||
child: GridView.builder(
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
child: _generateList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
GridView _generateList() {
|
||||
return GridView.builder(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 1, // 2 Kolom
|
||||
crossAxisSpacing: 10,
|
||||
mainAxisSpacing: 10,
|
||||
@ -341,21 +358,20 @@ class _ListEducationState extends State<ListEducation> {
|
||||
child: CardList(
|
||||
title: _listContent[index]["title"] ?? "",
|
||||
body: _listContent[index]["body"] ?? "",
|
||||
gambar: _listContent[index]['image'],
|
||||
point: _listContent[index]['coint'],
|
||||
coint: _listContent[index]['point'],
|
||||
tipe: _listContent[index]['tipe'],
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(
|
||||
context,
|
||||
) => listDetailExtension.buildPage({
|
||||
'title':
|
||||
filteredItems[index]['category'],
|
||||
'imagePath':
|
||||
filteredItems[index]['image'],
|
||||
'filepath':
|
||||
filteredItems[index]['file'],
|
||||
(context) => listDetailExtension.buildPage({
|
||||
'title': filteredItems[index]['category'],
|
||||
'imagePath': filteredItems[index]['image'],
|
||||
'filepath': filteredItems[index]['file'],
|
||||
'paragraphs':
|
||||
"""
|
||||
"""
|
||||
@ -366,14 +382,6 @@ class _ListEducationState extends State<ListEducation> {
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,13 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_html/flutter_html.dart';
|
||||
|
||||
class ListDetailScreen extends StatefulWidget {
|
||||
class ListPustakaDetailScreen extends StatefulWidget {
|
||||
final String title;
|
||||
final String imagePath;
|
||||
final String paragraphs;
|
||||
final String filepath;
|
||||
|
||||
const ListDetailScreen({
|
||||
const ListPustakaDetailScreen({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.imagePath,
|
||||
@ -20,7 +20,7 @@ class ListDetailScreen extends StatefulWidget {
|
||||
_ListDetailScreenState createState() => _ListDetailScreenState();
|
||||
}
|
||||
|
||||
class _ListDetailScreenState extends State<ListDetailScreen> {
|
||||
class _ListDetailScreenState extends State<ListPustakaDetailScreen> {
|
||||
late List<bool> _readStatus;
|
||||
String _htmlContent = '';
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ class _AkunSayaState extends State<AkunSaya> {
|
||||
height: MediaQuery.of(context).size.height * 0.7,
|
||||
width: MediaQuery.of(context).size.width,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 205, 202, 189),
|
||||
color: const Color.fromARGB(255, 212, 211, 208),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(20),
|
||||
topRight: Radius.circular(20),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user