Fakultas Ilmu Komputer UI

Commit 02b099bd authored by Ardian Ghifari's avatar Ardian Ghifari
Browse files

Merge branch 'dev-ardian' into 'PBI-15-redesign_menu'

Add shimmer loading effect

See merge request !77
parents 828e3da4 0ec4b120
Pipeline #82078 failed with stages
in 10 minutes and 48 seconds
This diff is collapsed.
...@@ -15,6 +15,7 @@ import 'package:bisaGo/page/filter_fasilitas/komentar.dart'; ...@@ -15,6 +15,7 @@ import 'package:bisaGo/page/filter_fasilitas/komentar.dart';
import 'package:bisaGo/model/komentar.dart'; import 'package:bisaGo/model/komentar.dart';
import 'package:bisaGo/page/login/login.dart'; import 'package:bisaGo/page/login/login.dart';
import 'package:shared_preferences/shared_preferences.dart'; import 'package:shared_preferences/shared_preferences.dart';
import 'package:shimmer/shimmer.dart';
import 'kegiatan.dart'; import 'kegiatan.dart';
...@@ -29,7 +30,8 @@ class Fasilitas extends StatefulWidget { ...@@ -29,7 +30,8 @@ class Fasilitas extends StatefulWidget {
_FasilitasState createState() => _FasilitasState(); _FasilitasState createState() => _FasilitasState();
} }
class _FasilitasState extends State<Fasilitas> { class _FasilitasState extends State<Fasilitas>
with AutomaticKeepAliveClientMixin<Fasilitas> {
var kursiRodaVal = true; var kursiRodaVal = true;
var liftVal = true; var liftVal = true;
var toiletDisabilitasVal = true; var toiletDisabilitasVal = true;
...@@ -45,11 +47,21 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -45,11 +47,21 @@ class _FasilitasState extends State<Fasilitas> {
var runningTextVal = true; var runningTextVal = true;
var sortKomentar = -1; var sortKomentar = -1;
var showUrutan = true; var showUrutan = true;
var _enabled = true;
List<KegiatanModel> allKegiatanFromApi; List<KegiatanModel> allKegiatanFromApi;
List<KomentarModel> allKomentarFromApi; List<KomentarModel> allKomentarFromApi;
KegiatanBloc _kegiatanBloc; KegiatanBloc _kegiatanBloc;
KomentarBloc _komentarBloc; KomentarBloc _komentarBloc;
LokasiResponseBloc _lokasiBloc; LokasiResponseBloc _lokasiBloc;
final mockLokasi = Lokasi.fromJson({
'placeId': 'lKHBIUnKLJnKjnKLN',
'name': 'Margo City',
'alamat':
'Jl. Margonda Raya No.358, Kemiri Muka, Kecamatan Beji, Kota Depok, Jawa Barat 16423',
'image': 'static/img/2669211407.jpg',
'no_telp': '02178870888',
'counter': 69,
});
@override @override
void initState() { void initState() {
...@@ -64,6 +76,7 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -64,6 +76,7 @@ class _FasilitasState extends State<Fasilitas> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
super.build(context);
return DefaultTabController( return DefaultTabController(
length: 2, length: 2,
child: Scaffold( child: Scaffold(
...@@ -277,16 +290,18 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -277,16 +290,18 @@ class _FasilitasState extends State<Fasilitas> {
if (snapshot.hasData) { if (snapshot.hasData) {
switch (snapshot.data.status) { switch (snapshot.data.status) {
case Status.loading: case Status.loading:
return const Center( _enabled = true;
child: CircularProgressIndicator( return Column(children: [
valueColor: Shimmer.fromColors(
AlwaysStoppedAnimation<Color>( baseColor: Colors.grey[300],
greenPrimary), highlightColor: Colors.grey[100],
), enabled: _enabled,
); child: _buildMockKomentarWidget())
]);
break; break;
case Status.completed: case Status.completed:
_enabled = false;
allKomentarFromApi = allKomentarFromApi =
snapshot.data.data.allKomentar; snapshot.data.data.allKomentar;
if (allKomentarFromApi.isEmpty) { if (allKomentarFromApi.isEmpty) {
...@@ -303,6 +318,7 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -303,6 +318,7 @@ class _FasilitasState extends State<Fasilitas> {
break; break;
case Status.error: case Status.error:
_enabled = false;
return const Center( return const Center(
child: Text('Belum ada informasi'), child: Text('Belum ada informasi'),
); );
...@@ -401,16 +417,18 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -401,16 +417,18 @@ class _FasilitasState extends State<Fasilitas> {
if (snapshot.hasData) { if (snapshot.hasData) {
switch (snapshot.data.status) { switch (snapshot.data.status) {
case Status.loading: case Status.loading:
return const Center( _enabled = true;
child: CircularProgressIndicator( return Column(children: [
valueColor: Shimmer.fromColors(
AlwaysStoppedAnimation<Color>( baseColor: Colors.grey[300],
greenPrimary), highlightColor: Colors.grey[100],
), enabled: _enabled,
); child: _buildMockKegiatanWidget())
]);
break; break;
case Status.completed: case Status.completed:
_enabled = false;
allKegiatanFromApi = allKegiatanFromApi =
snapshot.data.data.allKegiatan; snapshot.data.data.allKegiatan;
if (allKegiatanFromApi.isEmpty) { if (allKegiatanFromApi.isEmpty) {
...@@ -427,6 +445,7 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -427,6 +445,7 @@ class _FasilitasState extends State<Fasilitas> {
break; break;
case Status.error: case Status.error:
_enabled = false;
return const Center( return const Center(
child: Text('Belum ada informasi'), child: Text('Belum ada informasi'),
); );
...@@ -506,4 +525,43 @@ class _FasilitasState extends State<Fasilitas> { ...@@ -506,4 +525,43 @@ class _FasilitasState extends State<Fasilitas> {
await _lokasiBloc.postSearchHistory(widget.lokasi.placeId, token); await _lokasiBloc.postSearchHistory(widget.lokasi.placeId, token);
} }
} }
Widget _buildMockKomentarWidget() {
final mockKomentar = KomentarModel.fromJson({
'id': 119,
'nama_lokasi': 'Margo City',
'deskripsi': 'loremipsum ipsmum',
'creator': 'Ardian Ghifari',
'email': 'ardianghi@gmail.com',
'date_time': '12-11-2020 02:56:49',
'tag': 'JI',
'disabilitas': ['DS'],
'image': 'static/img/2669211407.jpg',
'is_verified': false,
'jumlah': 2,
'rating': 5
});
return Container(
child: Komentar(lokasi: mockLokasi, komentar: mockKomentar));
}
Widget _buildMockKegiatanWidget() {
final mockKegiatan = KegiatanModel.fromJson({
'id': 1,
'place_id': 'asdfghjkl',
'creator': 'Jovi',
'nama_kegiatan': 'Jalan Sehat',
'penyelenggara': 'Gubernur',
'narahubung': 'Rafif (0880123456123456)',
'deskripsi': 'Jalan sehat keliling kota',
'time_start': '2021-05-15 06:00:00',
'time_end': '2021-05-15 10:00:00',
'image': ['a', 'b', 'c'],
});
return Container(
child: Kegiatan(lokasi: mockLokasi, kegiatan: mockKegiatan));
}
@override
bool get wantKeepAlive => true;
} }
...@@ -4,7 +4,6 @@ import 'package:bisaGo/model/kegiatan.dart'; ...@@ -4,7 +4,6 @@ import 'package:bisaGo/model/kegiatan.dart';
import 'package:bisaGo/page/filter_fasilitas/postingan/detail_post_kegiatan.dart'; import 'package:bisaGo/page/filter_fasilitas/postingan/detail_post_kegiatan.dart';
import 'package:carousel_slider/carousel_slider.dart'; import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
// import 'package:bisaGo/component/image_holder.dart';
class Kegiatan extends StatefulWidget { class Kegiatan extends StatefulWidget {
final Lokasi lokasi; final Lokasi lokasi;
...@@ -17,6 +16,7 @@ class Kegiatan extends StatefulWidget { ...@@ -17,6 +16,7 @@ class Kegiatan extends StatefulWidget {
} }
class _KegiatanState extends State<Kegiatan> { class _KegiatanState extends State<Kegiatan> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return InkWell( return InkWell(
...@@ -24,21 +24,25 @@ class _KegiatanState extends State<Kegiatan> { ...@@ -24,21 +24,25 @@ class _KegiatanState extends State<Kegiatan> {
onTap: () { onTap: () {
Navigator.of(context).push(MaterialPageRoute( Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => DetailPostKegiatanPage( builder: (BuildContext context) => DetailPostKegiatanPage(
lokasi: widget.lokasi, lokasi: widget.lokasi,
kegiatan: KegiatanModel( kegiatan: KegiatanModel(
id: widget.kegiatan.id, id: widget.kegiatan.id,
placeId: widget.kegiatan.placeId, placeId: widget.kegiatan.placeId,
creator: widget.kegiatan.creator, creator: widget.kegiatan.creator,
namaKegiatan: widget.kegiatan.namaKegiatan, creatorEmail: widget.kegiatan.creatorEmail,
penyelenggara: widget.kegiatan.penyelenggara, namaKegiatan: widget.kegiatan.namaKegiatan,
narahubung: widget.kegiatan.narahubung, penyelenggara: widget.kegiatan.penyelenggara,
deskripsi: widget.kegiatan.deskripsi, deskripsi: widget.kegiatan.deskripsi,
timeStart: widget.kegiatan.timeStart, namaKontak: widget.kegiatan.namaKontak,
timeEnd: widget.kegiatan.timeEnd, nomorKontak: widget.kegiatan.nomorKontak,
image: widget.kegiatan.image, links: widget.kegiatan.links,
creatorEmail: widget.kegiatan.creatorEmail, timeStart: widget.kegiatan.timeStart,
), timeEnd: widget.kegiatan.timeEnd,
))); zonaWaktu: widget.kegiatan.zonaWaktu,
images: widget.kegiatan.images,
),
)
));
}, },
child: Container( child: Container(
margin: const EdgeInsets.only(bottom: regularSpace), margin: const EdgeInsets.only(bottom: regularSpace),
...@@ -58,81 +62,74 @@ class _KegiatanState extends State<Kegiatan> { ...@@ -58,81 +62,74 @@ class _KegiatanState extends State<Kegiatan> {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Text( Flexible(
widget.kegiatan.namaKegiatan, child: Text(
style: const TextStyle( widget.kegiatan.namaKegiatan,
fontSize: 16, style: const TextStyle(
fontWeight: FontWeight.w800, fontSize: 16,
color: Colors.black, fontWeight: FontWeight.w800,
fontFamily: 'Muli', color: Colors.black,
fontFamily: 'Muli',
),
), ),
), ),
], ],
), ),
), ),
Container( Container(
margin: const EdgeInsets.only(bottom: regularSpace), margin: const EdgeInsets.only(bottom: regularSpace),
child: SizedBox( child: SizedBox(
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
height: 160, height: 160,
child: CarouselSlider( child: CarouselSlider(
options: CarouselOptions( options: CarouselOptions(
aspectRatio: 1.0, aspectRatio: 1.0,
enlargeCenterPage: true, enlargeCenterPage: true,
enableInfiniteScroll: false, enableInfiniteScroll: false,
initialPage: 0, initialPage: 0,
autoPlay: true, autoPlay: true,
), ),
items: widget.kegiatan.image items: widget.kegiatan.images.map((item) => Container(
.map((item) => Container( child: Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Stack(
children: <Widget>[
Image.network(item, fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container( child: Container(
child: ClipRRect( decoration: BoxDecoration(
borderRadius: BorderRadius.all( gradient: LinearGradient(
Radius.circular(20)), colors: [
child: Stack( Color.fromARGB(200, 0, 0, 0),
children: <Widget>[ Color.fromARGB(0, 0, 0, 0)
Image.network(item, ],
fit: BoxFit.cover, begin: Alignment.bottomCenter,
width: 1000.0), end: Alignment.topCenter,
Positioned( ),
bottom: 0.0, ),
left: 0.0, padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
right: 0.0, child: Text(
child: Container( '#${widget.kegiatan.images.indexOf(item)+1}',
decoration: BoxDecoration( style: TextStyle(
gradient: LinearGradient( color: Colors.white,
colors: [ fontSize: 20.0,
Color.fromARGB( fontWeight: FontWeight.bold,
200, 0, 0, 0), ),
Color.fromARGB( ),
0, 0, 0, 0)
],
begin: Alignment
.bottomCenter,
end: Alignment.topCenter,
),
),
padding: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 20.0),
child: Text(
'#${widget.kegiatan.image.indexOf(item) + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight:
FontWeight.bold,
),
),
),
),
],
)),
), ),
)) ),
.toList(), ],
), )
)), ),
),
)).toList(),
),
)
),
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,
...@@ -157,4 +154,4 @@ class _KegiatanState extends State<Kegiatan> { ...@@ -157,4 +154,4 @@ class _KegiatanState extends State<Kegiatan> {
), ),
)); ));
} }
} }
\ No newline at end of file
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class KegiatanImageView extends StatefulWidget {
final String url;
KegiatanImageView(this.url);
@override
_KegiatanImageView createState() => _KegiatanImageView(url);
}
class _KegiatanImageView extends State<KegiatanImageView> {
final String url;
_KegiatanImageView(this.url);
@override
Widget build(BuildContext context) {
return Scaffold(
body: PhotoView(
imageProvider: NetworkImage(url),
)
);
}
}
\ No newline at end of file
import 'package:bisaGo/component/bisago_appbar.dart';
import 'package:bisaGo/page/filter_fasilitas/kegiatan_image_view.dart';
import 'package:flutter/material.dart';
class KegiatanListImages extends StatefulWidget {
final List<String> urls;
final String namaKegiatan;
KegiatanListImages(this.urls, this.namaKegiatan);
@override
_KegiatanListImages createState() => _KegiatanListImages(urls, namaKegiatan);
}
class _KegiatanListImages extends State<KegiatanListImages> {
List<String> urls;
String namaKegiatan;
_KegiatanListImages(this.urls, this.namaKegiatan);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: BisaGoAppBar(
title: namaKegiatan,
),
body: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
child: GridView.count(
crossAxisCount: 2,
padding: EdgeInsets.all(3.0),
children: urls.map<Widget>((url) => renderImage(url)).toList(),
),
),
);
}
Card renderImage(String imageUrl) {
return Card(
elevation: 1.0,
margin: EdgeInsets.all(5.0),
child: Container(
child: InkWell(
onTap: () {
Navigator.push<Widget>(
context,
MaterialPageRoute(
builder: (context) => KegiatanImageView(imageUrl),
),
);
},
child: Image.network(imageUrl, fit: BoxFit.cover),
),
)
);
}
}
\ No newline at end of file
...@@ -23,6 +23,7 @@ import 'package:bisaGo/network/data/network_model.dart'; ...@@ -23,6 +23,7 @@ import 'package:bisaGo/network/data/network_model.dart';
import 'package:bisaGo/page/login/login.dart'; import 'package:bisaGo/page/login/login.dart';
import 'package:share/share.dart'; import 'package:share/share.dart';
import 'package:shared_preferences/shared_preferences.dart'; import 'package:shared_preferences/shared_preferences.dart';
import 'package:shimmer/shimmer.dart';
class DetailPostPage extends StatefulWidget { class DetailPostPage extends StatefulWidget {
final Lokasi lokasi; final Lokasi lokasi;
...@@ -46,6 +47,7 @@ class _DetailPostPageState extends State<DetailPostPage> { ...@@ -46,6 +47,7 @@ class _DetailPostPageState extends State<DetailPostPage> {
int dislike; int dislike;
int alreadyLikeFlag; int alreadyLikeFlag;
int alreadyDislikeFlag; int alreadyDislikeFlag;
bool _enabled = true;
@override @override
void initState() { void initState() {
...@@ -298,14 +300,17 @@ class _DetailPostPageState extends State<DetailPostPage> { ...@@ -298,14 +300,17 @@ class _DetailPostPageState extends State<DetailPostPage> {
if (snapshot.hasData) { if (snapshot.hasData) {
switch (snapshot.data.status) { switch (snapshot.data.status) {
case Status.loading: case Status.loading:
return const Center( _enabled = true;
child: CircularProgressIndicator( return Column(children: [
valueColor: AlwaysStoppedAnimation<Color>( Shimmer.fromColors(
greenPrimary), baseColor: Colors.grey[300],
), highlightColor: Colors.grey[100],
); enabled: _enabled,
child: _buildMockKomentarPostingWidget())
]);
break; break;
case Status.completed: case Status.completed:
_enabled = false;
allKomentarPostingFromApi = allKomentarPostingFromApi =
snapshot.data.data.allKomentar; snapshot.data.data.allKomentar;
if (allKomentarPostingFromApi.isEmpty) { if (allKomentarPostingFromApi.isEmpty) {
...@@ -327,6 +332,7 @@ class _DetailPostPageState extends State<DetailPostPage> { ...@@ -327,6 +332,7 @@ class _DetailPostPageState extends State<DetailPostPage> {
} }
break; break;
case Status.error: case Status.error:
_enabled = false;
return Center( return Center(
child: Text(snapshot.data.data.toString()), child: Text(snapshot.data.data.toString()),
); );
...@@ -592,6 +598,30 @@ class _DetailPostPageState extends State<DetailPostPage> { ...@@ -592,6 +598,30 @@ class _DetailPostPageState extends State<DetailPostPage> {
} }
} }
// void _navigateToProfilePage(BuildContext context, String email) {
// var route = MaterialPageRoute(builder: (_) => Profile(email: email));
// Navigator.of(context).push(route);
// }
Widget _buildMockKomentarPostingWidget() {
final k = KomentarPostingModel.fromJson({
'id': 119,
'creator': 'Ardian Ghifari',
'created': '12-12-2021 06:30:00',
'deskripsi': 'loremipsum ipsmum',
'creatorEmail': 'ardianghi@gmail.com',
'creatorPicture': 'static/img/2669211407.jpg',
});