2017-05-28 13:13:36 -04:00
|
|
|
/*
|
|
|
|
* fluro
|
2018-10-25 13:48:02 -04:00
|
|
|
* Created by Yakka
|
|
|
|
* https://theyakka.com
|
|
|
|
*
|
2019-06-19 19:28:28 -04:00
|
|
|
* Copyright (c) 2019 Yakka, LLC. All rights reserved.
|
2017-05-28 13:13:36 -04:00
|
|
|
* See LICENSE for distribution and usage details.
|
|
|
|
*/
|
2018-01-17 00:12:32 -05:00
|
|
|
import 'dart:async';
|
2017-05-28 13:13:36 -04:00
|
|
|
|
|
|
|
import 'package:fluro/fluro.dart';
|
2019-07-17 23:19:56 -04:00
|
|
|
import 'package:flutter/cupertino.dart';
|
2017-05-28 13:13:36 -04:00
|
|
|
import 'package:flutter/material.dart';
|
2018-01-17 00:12:32 -05:00
|
|
|
import 'package:flutter/services.dart';
|
|
|
|
|
2019-07-17 23:19:56 -04:00
|
|
|
import '../../config/application.dart';
|
|
|
|
|
2018-01-17 00:12:32 -05:00
|
|
|
class HomeComponent extends StatefulWidget {
|
|
|
|
@override
|
2019-07-17 23:19:56 -04:00
|
|
|
State createState() => HomeComponentState();
|
2018-01-17 00:12:32 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class HomeComponentState extends State<HomeComponent> {
|
|
|
|
var _deepLinkOpacity = 1.0;
|
2018-07-27 21:15:51 -04:00
|
|
|
final _deepLinkURL =
|
|
|
|
"fluro://deeplink?path=/message&mesage=fluro%20rocks%21%21";
|
2018-01-17 00:12:32 -05:00
|
|
|
final _daysOfWeek = const [
|
2018-07-27 21:15:51 -04:00
|
|
|
"Monday",
|
|
|
|
"Tuesday",
|
|
|
|
"Wednesday",
|
|
|
|
"Thursday",
|
|
|
|
"Friday",
|
|
|
|
"Saturday",
|
|
|
|
"Sunday"
|
2018-01-17 00:12:32 -05:00
|
|
|
];
|
|
|
|
|
|
|
|
Widget deepLinkWidget(BuildContext context) {
|
2019-07-17 23:19:56 -04:00
|
|
|
return Stack(
|
2018-01-17 00:12:32 -05:00
|
|
|
children: <Widget>[
|
|
|
|
// copied widget
|
2019-07-17 23:19:56 -04:00
|
|
|
AnimatedOpacity(
|
2018-01-17 00:12:32 -05:00
|
|
|
opacity: (_deepLinkOpacity - 1.0).abs(),
|
2019-07-17 23:19:56 -04:00
|
|
|
duration: Duration(milliseconds: 400),
|
|
|
|
child: Center(
|
|
|
|
child: Text(
|
2018-01-17 00:12:32 -05:00
|
|
|
"Copied to clipboard!",
|
2019-07-17 23:19:56 -04:00
|
|
|
style: TextStyle(
|
2018-01-17 00:12:32 -05:00
|
|
|
fontSize: 14.0,
|
|
|
|
color: const Color(0xFFFFFFFF),
|
|
|
|
fontWeight: FontWeight.w500,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
// button widget
|
2019-07-17 23:19:56 -04:00
|
|
|
AnimatedOpacity(
|
2018-01-17 00:12:32 -05:00
|
|
|
opacity: _deepLinkOpacity,
|
2019-07-17 23:19:56 -04:00
|
|
|
duration: Duration(milliseconds: 250),
|
|
|
|
child: Center(
|
|
|
|
child: FlatButton(
|
2018-01-17 00:12:32 -05:00
|
|
|
highlightColor: const Color(0x11FFFFFF),
|
|
|
|
splashColor: const Color(0x22FFFFFF),
|
|
|
|
onPressed: () {
|
|
|
|
if (_deepLinkOpacity == 1.0) {
|
2019-07-17 23:19:56 -04:00
|
|
|
Timer(Duration(milliseconds: 2000), () {
|
2018-01-17 00:12:32 -05:00
|
|
|
setState(() {
|
|
|
|
_deepLinkOpacity = 1.0;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
setState(() {
|
|
|
|
_deepLinkOpacity = 0.0;
|
|
|
|
});
|
2019-07-17 23:19:56 -04:00
|
|
|
final clipboardData = ClipboardData(text: _deepLinkURL);
|
2018-01-17 00:12:32 -05:00
|
|
|
Clipboard.setData(clipboardData);
|
|
|
|
}
|
|
|
|
},
|
2019-07-17 23:19:56 -04:00
|
|
|
child: Padding(
|
|
|
|
padding: EdgeInsets.all(8.0),
|
|
|
|
child: Text(
|
2018-01-17 00:12:32 -05:00
|
|
|
"Click here to copy a deep link url to the clipboard",
|
|
|
|
textAlign: TextAlign.center,
|
2019-07-17 23:19:56 -04:00
|
|
|
style: TextStyle(
|
2018-01-17 00:12:32 -05:00
|
|
|
fontSize: 12.0,
|
|
|
|
color: const Color(0xCCFFFFFF),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
],
|
|
|
|
);
|
|
|
|
}
|
2017-05-28 13:13:36 -04:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
var menuWidgets = <Widget>[
|
2019-07-17 23:19:56 -04:00
|
|
|
menuButton(context, 'assets/images/ic_transform_native_hz.png',
|
|
|
|
"Native Animation", "native"),
|
|
|
|
menuButton(context, 'assets/images/ic_transform_fade_in_hz.png',
|
|
|
|
"Preset (Fade In)", "preset-fade"),
|
|
|
|
menuButton(context, 'assets/images/ic_transform_global_hz.png',
|
|
|
|
"Preset (Global transition)", "fixed-trans"),
|
|
|
|
menuButton(context, 'assets/images/ic_transform_custom_hz.png',
|
|
|
|
"Custom Transition", "custom"),
|
|
|
|
menuButton(context, 'assets/images/ic_result_hz.png', "Navigator Result",
|
|
|
|
"pop-result"),
|
|
|
|
menuButton(context, 'assets/images/ic_function_hz.png', "Function Call",
|
|
|
|
"function-call"),
|
2017-05-28 13:13:36 -04:00
|
|
|
];
|
|
|
|
|
2019-07-17 23:19:56 -04:00
|
|
|
final size = MediaQuery.of(context).size;
|
|
|
|
final childRatio = (size.width / size.height) * 2.5;
|
|
|
|
|
|
|
|
return Material(
|
2017-05-28 13:13:36 -04:00
|
|
|
color: const Color(0xFF00D6F7),
|
2019-07-17 23:19:56 -04:00
|
|
|
child: SafeArea(
|
|
|
|
top: true,
|
|
|
|
child: Column(
|
|
|
|
mainAxisSize: MainAxisSize.max,
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
children: <Widget>[
|
|
|
|
Padding(
|
|
|
|
padding: EdgeInsets.only(top: 25, bottom: 35, left: 25),
|
|
|
|
child: Image(
|
|
|
|
image: AssetImage("assets/images/logo_fluro.png"),
|
|
|
|
width: 100.0,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Expanded(
|
|
|
|
child: Padding(
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 25),
|
|
|
|
child: GridView.count(
|
|
|
|
childAspectRatio: childRatio,
|
|
|
|
crossAxisCount: 2,
|
|
|
|
mainAxisSpacing: 5,
|
|
|
|
children: menuWidgets,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
// Padding(
|
|
|
|
// padding: EdgeInsets.only(top: 35.0, bottom: 25),
|
|
|
|
// child: Center(
|
|
|
|
// child: ConstrainedBox(
|
|
|
|
// constraints: BoxConstraints.tightFor(height: 60.0),
|
|
|
|
// child: deepLinkWidget(context),
|
|
|
|
// ),
|
|
|
|
// ),
|
|
|
|
// ),
|
|
|
|
],
|
|
|
|
),
|
2017-05-28 13:13:36 -04:00
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// helpers
|
2019-07-17 23:19:56 -04:00
|
|
|
Widget menuButton(
|
|
|
|
BuildContext context, String assetSrc, String title, String key) {
|
|
|
|
return Padding(
|
|
|
|
padding: EdgeInsets.all(4.0),
|
|
|
|
child: Container(
|
|
|
|
height: 42.0,
|
|
|
|
child: FlatButton(
|
|
|
|
color: const Color(0x22FFFFFF),
|
2018-01-17 00:12:32 -05:00
|
|
|
highlightColor: const Color(0x11FFFFFF),
|
|
|
|
splashColor: const Color(0x22FFFFFF),
|
2019-07-17 23:19:56 -04:00
|
|
|
child: Column(
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
|
|
|
Padding(
|
|
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
|
|
child: Container(
|
|
|
|
height: 36,
|
|
|
|
child: Image.asset(
|
|
|
|
assetSrc,
|
|
|
|
fit: BoxFit.contain,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Text(
|
|
|
|
title,
|
|
|
|
textAlign: TextAlign.center,
|
|
|
|
style: TextStyle(
|
|
|
|
color: const Color(0xAA001133),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
],
|
2017-05-28 13:13:36 -04:00
|
|
|
),
|
|
|
|
onPressed: () {
|
|
|
|
tappedMenuButton(context, key);
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// actions
|
|
|
|
void tappedMenuButton(BuildContext context, String key) {
|
|
|
|
String message = "";
|
|
|
|
String hexCode = "#FFFFFF";
|
2017-10-13 20:10:21 -04:00
|
|
|
String result;
|
2017-05-28 13:13:36 -04:00
|
|
|
TransitionType transitionType = TransitionType.native;
|
2018-12-13 16:53:54 -05:00
|
|
|
if (key != "custom" && key != "function-call" && key != "fixed-trans") {
|
2017-05-28 13:13:36 -04:00
|
|
|
if (key == "native") {
|
|
|
|
hexCode = "#F76F00";
|
2018-07-27 21:15:51 -04:00
|
|
|
message =
|
|
|
|
"This screen should have appeared using the default flutter animation for the current OS";
|
2017-05-28 13:13:36 -04:00
|
|
|
} else if (key == "preset-from-left") {
|
|
|
|
hexCode = "#5BF700";
|
2018-07-27 21:15:51 -04:00
|
|
|
message =
|
|
|
|
"This screen should have appeared with a slide in from left transition";
|
2017-05-28 13:13:36 -04:00
|
|
|
transitionType = TransitionType.inFromLeft;
|
|
|
|
} else if (key == "preset-fade") {
|
|
|
|
hexCode = "#F700D2";
|
|
|
|
message = "This screen should have appeared with a fade in transition";
|
|
|
|
transitionType = TransitionType.fadeIn;
|
2017-10-13 20:10:21 -04:00
|
|
|
} else if (key == "pop-result") {
|
|
|
|
transitionType = TransitionType.native;
|
2018-01-17 00:12:32 -05:00
|
|
|
hexCode = "#7d41f4";
|
2018-07-27 21:15:51 -04:00
|
|
|
message =
|
|
|
|
"When you close this screen you should see the current day of the week";
|
2019-07-17 23:19:56 -04:00
|
|
|
result = "Today is ${_daysOfWeek[DateTime.now().weekday - 1]}!";
|
2017-05-28 13:13:36 -04:00
|
|
|
}
|
2017-10-13 20:10:21 -04:00
|
|
|
|
|
|
|
String route = "/demo?message=$message&color_hex=$hexCode";
|
|
|
|
|
|
|
|
if (result != null) {
|
|
|
|
route = "$route&result=$result";
|
|
|
|
}
|
|
|
|
|
2018-07-27 21:15:51 -04:00
|
|
|
Application.router
|
|
|
|
.navigateTo(context, route, transition: transitionType)
|
|
|
|
.then((result) {
|
|
|
|
if (key == "pop-result") {
|
|
|
|
Application.router.navigateTo(context, "/demo/func?message=$result");
|
|
|
|
}
|
|
|
|
});
|
2017-05-28 13:13:36 -04:00
|
|
|
} else if (key == "custom") {
|
|
|
|
hexCode = "#DFF700";
|
2018-07-27 21:15:51 -04:00
|
|
|
message =
|
|
|
|
"This screen should have appeared with a crazy custom transition";
|
|
|
|
var transition = (BuildContext context, Animation<double> animation,
|
2017-10-13 20:10:21 -04:00
|
|
|
Animation<double> secondaryAnimation, Widget child) {
|
2019-07-17 23:19:56 -04:00
|
|
|
return ScaleTransition(
|
2017-05-28 13:13:36 -04:00
|
|
|
scale: animation,
|
2019-07-17 23:19:56 -04:00
|
|
|
child: RotationTransition(
|
2017-05-28 13:13:36 -04:00
|
|
|
turns: animation,
|
|
|
|
child: child,
|
|
|
|
),
|
|
|
|
);
|
|
|
|
};
|
|
|
|
Application.router.navigateTo(
|
|
|
|
context,
|
|
|
|
"/demo?message=$message&color_hex=$hexCode",
|
|
|
|
transition: TransitionType.custom,
|
|
|
|
transitionBuilder: transition,
|
|
|
|
transitionDuration: const Duration(milliseconds: 600),
|
|
|
|
);
|
2018-12-13 16:53:54 -05:00
|
|
|
} else if (key == "fixed-trans") {
|
|
|
|
Application.router.navigateTo(
|
|
|
|
context, "/demo/fixedtrans?message=Hello!&color_hex=#f4424b");
|
2017-05-28 13:13:36 -04:00
|
|
|
} else {
|
|
|
|
message = "You tapped the function button!";
|
|
|
|
Application.router.navigateTo(context, "/demo/func?message=$message");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|