Skip to content

Instantly share code, notes, and snippets.

@Blazebrain
Created December 5, 2021 05:54
Show Gist options
  • Save Blazebrain/c26fd8ee1dddf1b09f9ab34cab315644 to your computer and use it in GitHub Desktop.
Save Blazebrain/c26fd8ee1dddf1b09f9ab34cab315644 to your computer and use it in GitHub Desktop.
Shimmer Effect Sample App
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stacked/stacked.dart';
import 'home_viewmodel.dart';
class HomeView extends StatelessWidget {
const HomeView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ViewModelBuilder<HomeViewModel>.reactive(
viewModelBuilder: () => HomeViewModel(),
onModelReady: (viewModel) => viewModel.getCharacters(),
builder: (context, viewModel, child) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors
.primaries[Random().nextInt(Colors.primaries.length)]
.withOpacity(0.5),
centerTitle: true,
title: const Text(
'Characters List',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.black,
),
),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: viewModel.isBusy
? Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: ListView.builder(
itemCount: 6,
itemBuilder: (context, index) {
return Card(
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: const SizedBox(
height: 80,
),
);
},
),
)
: ListView.builder(
itemCount: viewModel.charactersList!.length,
itemBuilder: (context, index) {
return Card(
color: Colors.primaries[Random()
.nextInt(Colors.primaries.length)]
.withOpacity(0.5),
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 16,
horizontal: 16,
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
viewModel.charactersList![index].name!,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
const SizedBox(height: 4),
Text(
viewModel
.charactersList![index].species!,
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 16,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
);
},
),
)
],
),
),
),
);
},
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment