fixing mobile view

This commit is contained in:
='fauz
2025-04-14 15:14:10 +07:00
parent 64e1abb8db
commit 6607ee4906
22 changed files with 288 additions and 235 deletions
+9 -8
View File
@@ -4,7 +4,6 @@ import 'package:furibase/components/bottom_navbar.dart';
import 'package:furibase/components/buildcard_info.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/scan_button.dart';
import 'package:furibase/components/topbar_container.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({super.key});
@@ -71,11 +70,13 @@ class _HomeScreenState extends State<HomeScreen> {
body: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/background.jpeg"),
fit: BoxFit.cover,
child: RepaintBoundary(
child: Container(
decoration: const BoxDecoration(
image: const DecorationImage(
image: AssetImage("assets/images/background.jpeg"),
fit: BoxFit.cover,
),
),
),
),
@@ -107,7 +108,7 @@ class _HomeScreenState extends State<HomeScreen> {
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: const DecorationImage(
image: AssetImage('images/luffy-u.png'),
image: AssetImage('assets/images/luffy-u.png'),
fit: BoxFit.cover,
),
),
@@ -220,7 +221,7 @@ class _HomeScreenState extends State<HomeScreen> {
),
),
SizedBox(height: 10),
setHomeImage("images/luffy.png", 300),
setHomeImage("assets/images/luffy.png", 300),
// Image.asset("images/luffy.png", width: 300),
],
),
@@ -24,50 +24,56 @@ class _CollectionCaraterScreenState extends State<CollectionCaraterScreen> {
children: [
Text("Favorite", style: TextStyle(color: Colors.black)),
Divider(height: 20, color: Colors.transparent),
Row(
// alignment: WrapAlignment.spaceAround,
spacing: 10, // Horizontal spacing between the containers
// runSpacing: 10, // Vertical spacing between lines
children: [
CollectionContainer(
label: "Luffy",
imagesrc: 'images/luffy.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
CollectionContainer(
label: "Oni Chan",
imagesrc: 'images/klipartz.png',
onTapAc: () => {},
),
],
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: () => {},
),
],
),
),
Divider(height: 20, color: Colors.transparent),
Text("All", style: TextStyle(color: Colors.black)),
Divider(height: 20, color: Colors.transparent),
Row(
// alignment: WrapAlignment.spaceAround,
spacing: 10, // Horizontal spacing between the containers
// runSpacing: 10, // Vertical spacing between lines
children: [
CollectionContainer(
label: "Luffy",
imagesrc: 'images/luffy.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
CollectionContainer(
label: "Oni Chan",
imagesrc: 'images/klipartz.png',
onTapAc: () => {},
),
CollectionContainer(
label: "Cepot",
imagesrc: 'images/cepott.png',
colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
onTapAc: () => {},
),
],
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: () => {},
),
],
),
),
],
),
@@ -29,13 +29,13 @@ class _CollectionFragmentScreenState extends State<CollectionFragmentScreen> {
children: [
CollectionContainer(
label: "Luffy",
imagesrc: 'images/ft_luffy.png',
imagesrc: 'assets/images/ft_luffy.png',
onTapAc: () => {},
colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
),
CollectionContainer(
label: "Oni Chan",
imagesrc: 'images/ft_cepot.png',
imagesrc: 'assets/images/ft_cepot.png',
onTapAc: () => {},
colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
),
@@ -11,8 +11,9 @@ class CollectionSkinScreen extends StatefulWidget {
class _CollectionSkinScreenState extends State<CollectionSkinScreen> {
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
return Container(
// scrollDirection: Axis.horizontal,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -21,56 +22,57 @@ class _CollectionSkinScreenState extends State<CollectionSkinScreen> {
padding: EdgeInsets.only(top: 40, left: 20, right: 20, bottom: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Luffy", style: TextStyle(color: Colors.black)),
Divider(height: 10),
Row(
// alignment: WrapAlignment.start,
spacing: 10, // Horizontal spacing between the containers
// runSpacing: 10, // Vertical spacing between lines
children: [
CollectionContainer(
label: "Luffy Kimono",
imagesrc: 'images/luffy-kimono.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
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: 'images/luffy.png',
colorContiner: Color.fromRGBO(12, 199, 215, 1),
onTapAc: () => {},
),
CollectionContainer(
label: "Luffy King",
imagesrc: 'images/luffy-king.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)),
Divider(height: 10),
Row(
// alignment: WrapAlignment.start,
spacing: 10, // Horizontal spacing between the containers
// runSpacing: 10, // Vertical spacing between lines
children: [
CollectionContainer(
label: "Oni Chan (Default)",
imagesrc: 'images/klipartz.png',
onTapAc: () => {},
),
CollectionContainer(
label: "Cepot (Default)",
imagesrc: 'images/cepott.png',
colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
onTapAc: () => {},
),
],
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
spacing: 10,
children: [
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: () => {},
),
],
),
),
],
),
+4 -3
View File
@@ -36,6 +36,7 @@ class _KoleksiScreenState extends State<KoleksiScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
body: Stack(
children: <Widget>[
Positioned.fill(
@@ -115,9 +116,9 @@ class _KoleksiScreenState extends State<KoleksiScreen> {
// ),
// ),
Positioned(
top: 80,
left: 40,
right: 40,
top: 70,
left: 10,
right: 10,
child: Container(
// decoration: const BoxDecoration(
// borderRadius: BorderRadius.all(Radius.circular(20)),
+1 -1
View File
@@ -39,7 +39,7 @@ class _ListDetailScreenState extends State<ListDetailScreen> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'images/default.png', // Ganti dengan gambar yang sesuai
'assets/images/default.png', // Ganti dengan gambar yang sesuai
width: 100,
height: 100,
fit: BoxFit.cover,
+35 -18
View File
@@ -4,6 +4,7 @@ import 'package:furibase/components/card_list.dart';
import 'package:furibase/components/collection_container%20copy.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/topbar_container.dart';
import 'package:furibase/helpers/color_helper.dart';
import 'package:furibase/screen/pustaka/pustaka_detail_screen.dart';
class ListEducation extends StatefulWidget {
@@ -43,13 +44,33 @@ class _ListEducationState extends State<ListEducation> {
@override
Widget build(BuildContext context) {
String _searchQuery = "";
final List<Map<String, String>> _collections = [
{"label": "Kesehatan", "image": "icons/healthy.svg"},
{"label": "Gizi", "image": "icons/Nutrition.svg"},
{"label": "Pendidikan", "image": "icons/Education.svg"},
{"label": "Keselamatan", "image": "icons/Safety.svg"},
final List<Map<String, dynamic>> _collections = [
{
"label": "Kesehatan",
"image": "assets/icons/healthy.svg",
"color": "#cdd0ee",
"category": "kesehatan",
},
{
"label": "Gizi",
"image": "assets/icons/Nutrition.svg",
"color": "#e8e29a",
"category": "gizi",
},
{
"label": "Pendidikan",
"image": "assets/icons/Education.svg",
"color": "#efd8c6",
"category": "pendidikan",
},
{
"label": "Keselamatan",
"image": "assets/icons/Safety.svg",
"color": "#cef1da",
"category": "keselamatan",
},
];
List<Map<String, String>> filteredCollections =
List<Map<String, dynamic>> filteredCollections =
_collections
.where(
(item) => item["label"]!.toLowerCase().contains(
@@ -66,13 +87,13 @@ class _ListEducationState extends State<ListEducation> {
),
actions: <Widget>[],
),
backgroundColor: Colors.black26,
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
body: Column(
children: [
// Header Section
Container(
width: MediaQuery.of(context).size.width,
height: 165,
height: 150,
decoration: BoxDecoration(
color: const Color.fromARGB(225, 79, 76, 182),
borderRadius: BorderRadius.only(
@@ -85,7 +106,7 @@ class _ListEducationState extends State<ListEducation> {
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
vertical: 6,
),
child: Container(
height: 47,
@@ -141,21 +162,17 @@ class _ListEducationState extends State<ListEducation> {
return CollectionContainer(
label: item["label"]!,
imageSvg: item["image"]!,
iconw: 60,
iconh: 60,
iconw: 20,
iconh: 20,
width: 70,
height: 70,
circle: false,
textColor: Colors.black,
lblSize: 10,
colorContiner: ColorHelper.hexToColor(item["color"]),
onTapAc:
() => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ListEducation(),
),
),
searchController.clear(),
filterSearch(item["category"]),
},
);
}).toList(),
@@ -91,25 +91,25 @@ class _PustakaScreenState extends State<PustakaScreen> {
final List<Map<String, String>> _collections = [
{
"label": "Luffy",
"image": "images/luffy.png",
"image": "assets/images/luffy.png",
"description":
"Karakter utama di One Piece.\nDia adalah bajak laut yang bercita-cita menjadi Raja Bajak Laut.",
},
{
"label": "Oni Chan",
"image": "images/klipartz.png",
"image": "assets/images/klipartz.png",
"description":
"Karakter ikonik dari anime.\nIa dikenal karena sifatnya yang protektif dan penyayang.",
},
{
"label": "Cepot",
"image": "images/cepott.png",
"image": "assets/images/cepott.png",
"description":
"Tokoh wayang golek terkenal.\nCepot dikenal dengan lelucon dan kebijaksanaannya.",
},
{
"label": "Cepot",
"image": "images/cepott.png",
"image": "assets/images/cepott.png",
"description":
"Tokoh wayang golek terkenal.\nCepot dikenal dengan lelucon dan kebijaksanaannya.",
},
+44 -52
View File
@@ -22,10 +22,26 @@ class _PustakaScreenState extends State<PustakaScreen> {
String _searchQuery = "";
final List<Map<String, dynamic>> _collections = [
{"label": "Kesehatan", "image": "icons/healthy.svg", "color": "#cdd0ee"},
{"label": "Gizi", "image": "icons/Nutrition.svg", "color": "#e8e29a"},
{"label": "Pendidikan", "image": "icons/Education.svg", "color": "#efd8c6"},
{"label": "Keselamatan", "image": "icons/Safety.svg", "color": "#cef1da"},
{
"label": "Kesehatan",
"image": "assets/icons/healthy.svg",
"color": "#cdd0ee",
},
{
"label": "Gizi",
"image": "assets/icons/Nutrition.svg",
"color": "#e8e29a",
},
{
"label": "Pendidikan",
"image": "assets/icons/Education.svg",
"color": "#efd8c6",
},
{
"label": "Keselamatan",
"image": "assets/icons/Safety.svg",
"color": "#cef1da",
},
];
void _onMenuTapped(int index) {
@@ -51,7 +67,7 @@ class _PustakaScreenState extends State<PustakaScreen> {
.toList();
return Scaffold(
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
// backgroundColor: const Color.fromARGB(255, 255, 255, 255),
body: Stack(
children: [
//Top Bar
@@ -110,7 +126,7 @@ class _PustakaScreenState extends State<PustakaScreen> {
height: 47,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: const Color.fromARGB(50, 237, 227, 227),
color: const Color.fromARGB(255, 237, 227, 227),
),
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Row(
@@ -141,16 +157,17 @@ class _PustakaScreenState extends State<PustakaScreen> {
),
),
// Collection Items
Expanded(
Container(
height: 440,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 100,
vertical: 40,
horizontal: 58,
vertical: 60,
),
child: GridView.builder(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 140, // Maksimum lebar tiap item
maxCrossAxisExtent: 140,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
childAspectRatio: 1, // 1:1 rasio (kotak)
@@ -176,52 +193,27 @@ class _PustakaScreenState extends State<PustakaScreen> {
},
);
},
// GridView.count(
// crossAxisCount: 2,
// crossAxisSpacing: 20,
// mainAxisSpacing: 20,
// children:
// filteredCollections.map((item) {
// return CollectionContainer(
// label: item["label"]!,
// imageSvg: item["image"]!,
// width: 80,
// height: 80,
// textColor: Colors.black,
// circle: true,
// colorContiner: item["color"]! as Color,
// onTapAc:
// () => {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => ListEducation(),
// ),
// ),
// },
// );
// }).toList(),
),
),
),
SizedBox(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 40,
vertical: 1,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("List Topic", style: TextStyle(color: Colors.black)),
Divider(color: Colors.transparent),
],
),
),
),
// SizedBox(
// child: Padding(
// padding: const EdgeInsets.symmetric(
// horizontal: 5,
// vertical: 1,
// ),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text("List Topic", style: TextStyle(color: Colors.black)),
// Divider(color: Colors.transparent),
// ],
// ),
// ),
// ),
// Horizontal Scroll List
Padding(
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 100,
@@ -282,7 +274,7 @@ class _PustakaScreenState extends State<PustakaScreen> {
),
),
// Bottom Navigation
MainMenu(),
// MainMenu(),
],
),
// BG MEnu
+11 -11
View File
@@ -7,7 +7,7 @@ import 'package:furibase/components/scan_button.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:image_picker_web/image_picker_web.dart';
// import 'package:image_picker_web/image_picker_web.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
class AkunSaya extends StatefulWidget {
@@ -22,16 +22,16 @@ class _AkunSayaState extends State<AkunSaya> {
Future<void> _pickImage(bool isProfile) async {
if (kIsWeb) {
Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
if (bytesFromPicker != null) {
setState(() {
if (isProfile) {
_profileImage = bytesFromPicker;
} else {
_headerImage = bytesFromPicker;
}
});
}
// Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
// if (bytesFromPicker != null) {
// setState(() {
// if (isProfile) {
// _profileImage = bytesFromPicker;
// } else {
// _headerImage = bytesFromPicker;
// }
// });
// }
} else {
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
if (pickedFile != null) {
+1 -1
View File
@@ -86,7 +86,7 @@ class _ProfileScreenState extends State<ProfileScreenCopy> {
as ImageProvider
: FileImage(_headerImage)
as ImageProvider)
: AssetImage('images/background.jpeg'),
: AssetImage('assets/images/background.jpeg'),
fit: BoxFit.cover,
),
),
+12 -12
View File
@@ -1,7 +1,7 @@
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
// import 'package:flutter_html/flutter_html.dart';
import 'package:furibase/components/bottom_navbar.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/scan_button.dart';
@@ -10,7 +10,7 @@ import 'package:furibase/screen/saya/akun_saya.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:image_picker_web/image_picker_web.dart';
// import 'package:image_picker_web/image_picker_web.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
class ProfileScreen extends StatefulWidget {
@@ -28,16 +28,16 @@ class _ProfileScreenState extends State<ProfileScreen> {
Future<void> _pickImage(bool isProfile) async {
if (kIsWeb) {
Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
if (bytesFromPicker != null) {
setState(() {
if (isProfile) {
_profileImage = bytesFromPicker;
} else {
_headerImage = bytesFromPicker;
}
});
}
// Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
// if (bytesFromPicker != null) {
// setState(() {
// if (isProfile) {
// _profileImage = bytesFromPicker;
// } else {
// _headerImage = bytesFromPicker;
// }
// });
// }
} else {
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
if (pickedFile != null) {