Skip to content

Feature/shimmer presentation state #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+318 −168
Open

Feature/shimmer presentation state #14

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ec369f0
state of annimations
BohdanNikoletti Sep 29, 2019
c07f2b3
Fix docs
BohdanNikoletti Oct 3, 2019
328c707
Merge branch 'master' into feature/shimmer_presentation_state
BohdanNikoletti Feb 10, 2020
6901b18
Merge remote-tracking branch 'upstream/master' into feature/shimmer_p…
BohdanNikoletti Aug 29, 2020
df7eae4
fixed build
BohdanNikoletti Aug 29, 2020
ed4eb62
shorter form
BohdanNikoletti Aug 30, 2020
22ec63c
Make it testable + tests
BohdanNikoletti Aug 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 73 additions & 56 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(new MyApp());
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
return MaterialApp(
title: 'Shimmer',
routes: {
routes: <String, WidgetBuilder>{
'loading': (_) => LoadingListPage(),
'slide': (_) => SlideToUnlockPage(),
},
theme: new ThemeData(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shimmer'),
title: const Text('Shimmer'),
),
body: Column(
children: [
children: <Widget>[
ListTile(
title: Text('Loading List'),
title: const Text('Loading List'),
onTap: () => Navigator.of(context).pushNamed('loading'),
),
ListTile(
title: Text('Slide To Unlock'),
title: const Text('Slide To Unlock'),
onTap: () => Navigator.of(context).pushNamed('slide'),
),
],
Expand All @@ -54,13 +54,13 @@ class LoadingListPage extends StatefulWidget {
}

class _LoadingListPageState extends State<LoadingListPage> {
bool _enabled = true;
ShimmerState _currentShimmerState = ShimmerState.running;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading List'),
title: const Text('Loading List'),
),
body: Container(
width: double.infinity,
Expand All @@ -71,44 +71,43 @@ class _LoadingListPageState extends State<LoadingListPage> {
Shimmer.fromColors(
baseColor: Colors.grey[300],
highlightColor: Colors.grey[100],
enabled: _enabled,
shimmerState: _currentShimmerState,
child: Column(
children: [0, 1, 2, 3, 4, 5, 6]
children: <int>[0, 1, 2, 3, 4, 5, 6]
.map((_) => Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
children: <Widget>[
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 2.0),
const Padding(
padding:
EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 2.0),
const Padding(
padding:
EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: 40.0,
Expand All @@ -127,30 +126,48 @@ class _LoadingListPageState extends State<LoadingListPage> {
Expanded(
child: Container(),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: FlatButton(
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
child: Text(
_enabled ? 'Stop' : 'Play',
style: Theme.of(context).textTheme.button.copyWith(
fontSize: 18.0,
color: _enabled ? Colors.redAccent : Colors.green),
)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildButtonToggle(() {
setState(() {
_currentShimmerState = ShimmerState.running;
});
}, 'Play', Colors.green),
_buildButtonToggle(() {
setState(() {
_currentShimmerState = ShimmerState.paused;
});
}, 'Pause', Colors.deepOrange),
_buildButtonToggle(() {
setState(() {
_currentShimmerState = ShimmerState.stopped;
});
}, 'Stop', Colors.red),
],
)
],
),
),
);
}

Widget _buildButtonToggle(Function action, String text, Color color) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: FlatButton(
onPressed: action,
child: Text(text,
style: Theme.of(context).textTheme.button.copyWith(
fontSize: 18.0,
color: color,
)),
));
}
}

class SlideToUnlockPage extends StatelessWidget {
final days = [
final List<String> days = <String>[
'Monday',
'Tuesday',
'Wednesday',
Expand All @@ -159,7 +176,7 @@ class SlideToUnlockPage extends StatelessWidget {
'Saturday',
'Sunday'
];
final months = [
final List<String> months = <String>[
'January',
'February',
'March',
Expand All @@ -176,19 +193,19 @@ class SlideToUnlockPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
final time = DateTime.now();
final hour = time.hour;
final minute = time.minute;
final day = time.weekday;
final month = time.month;
final dayInMonth = time.day;
final DateTime time = DateTime.now();
final int hour = time.hour;
final int minute = time.minute;
final int day = time.weekday;
final int month = time.month;
final int dayInMonth = time.day;
return Scaffold(
appBar: AppBar(
title: Text('Slide To Unlock'),
title: const Text('Slide To Unlock'),
),
body: Stack(
fit: StackFit.expand,
children: [
children: <Widget>[
Image.asset(
'assets/images/background.jpg',
fit: BoxFit.cover,
Expand All @@ -199,16 +216,16 @@ class SlideToUnlockPage extends StatelessWidget {
left: 0.0,
child: Center(
child: Column(
children: [
children: <Widget>[
Text(
'${hour < 10 ? '0$hour' : '$hour'}:${minute < 10 ? '0$minute' : '$minute'}',
style: TextStyle(
fontSize: 60.0,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
const Padding(
padding: EdgeInsets.symmetric(vertical: 4.0),
),
Text(
'${days[day - 1]}, ${months[month - 1]} $dayInMonth',
Expand All @@ -228,15 +245,15 @@ class SlideToUnlockPage extends StatelessWidget {
child: Shimmer.fromColors(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
children: <Widget>[
Image.asset(
'assets/images/chevron_right.png',
height: 20.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
),
Text(
const Text(
'Slide to unlock',
style: TextStyle(
fontSize: 28.0,
Expand Down
Loading