adding flutter hero animations

flutter_hero/lib/main.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hero/trips.dart';
+import 'package:flutter_hero/ui/item_preview.dart';
+import 'package:flutter_hero/widgets/photo.dart';
+
+import 'utils/white_transitions.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  // This widget is the root of your application.
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.cyan,
+      ),
+      home: MyHomePage(title: 'Hero Animations Demo'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  var trips = [
+    Trips(
+        'https://imgproxy.natucate.com/jOqdUivhtzDON3kHAr2UXV-NPmCr3glnGWpdOwh8ymw/rs:fill/aHR0cHM6Ly93d3cubmF0dWNhdGUuY29tL21lZGlhL3BhZ2VzL3JlaXNlbi8wOGRhYjU5Zi1kMDY0LTRmMmUtODJkZC0xMGIxM2I5OGZmZDcvOTU3ODc1MTUwLTE2MTAxMDA2NTAvbmF0dXJyZWlzZS1pdGFsaWVuLWFwZW5uaW4tc2VlLXN0YWR0LW5hdHVjYXRlLmpwZw',
+        "Nature Travel Italy",
+        " Apennines Hiking TourNature Travel Italy: Apennines Hiking TourEnquire nowTake part in this five-day hiking tour in Italy and immerse yourself into the magnificent landscapes of the Apennines!This exclusive nature trip offers the opportunity to understand the relevance and importance of species conservation from both an ecological and economic perspective.While you become familiar with the flora and fauna of the Central Apennines with its bears, wolves, foxes and eagles, you will also expand your knowledge of the prevailing human-wildlife conflict and the measures developed to mitigate it.You will listen to lectures on species conservation, visit bear corridors and interact with local people. Every day, you will enjoy magnificent landscapes and culinary delights.Your personal guide is always with you, providing you with exciting background information on conservation issues on site.",
+        "price"),
+    Trips(
+        'https://imgproxy.natucate.com/dQfD-1NHz8OWdV0ztl18LVYcxMDFIXfu2FWhIlqUxic/rs:fill/aHR0cHM6Ly93d3cubmF0dWNhdGUuY29tL21lZGlhL3BhZ2VzL3JlaXNlbi8wYWY5NGM1Ni02YzkyLTRjYTUtYmFmZC01Yzc1ZjMwNWYyOTgvNzc2OTc0NjA5LTE1NTc5MjA2ODEvbmF0dXItdW5kLWVybGVibmlzcmVpc2Uta2VuaWEtYWZyaWthLWVjb3F1ZXN0LXNhZmFyaS16ZWJyYXMtbmF0dWNhdGUuanBn',
+        "Nature Travel Kenya",
+        "So far you have had little to do with nature, but would now like to embark on that journey? Then our introductory EcoQuest course in awe-inspiring Kenya is just right for you. This course is especially designed for newcomers, who can gather valuable insights which they will never forget, during a 7 or 14-day stay in awesome surroundings. Kenya's spectacular Masai Mara is the perfect region for an adventure which will make your daily routine fade into the background. Discover the exciting world of animals and plants and embark on your first steps in the wild with the EcoQuest course.",
+        "0"),
+    Trips(
+        'https://imgproxy.natucate.com/LPye_6n4p9bWKjZCid07JlYPZyZEcEuw_jq9LhVOgcc/rs:fill/aHR0cHM6Ly93d3cubmF0dWNhdGUuY29tL21lZGlhL3BhZ2VzL3JlaXNlbi8zYjE3OTRjMy03ZWIwLTQ2MmMtOTQ5NS1hNWI3ODZlZDNlMDMvMTEwOTgxMjY5Ni0xNTU3OTIwNjgxL25hdHVyLXVuZC1lcmxlYm5pc3JlaXNlLWFyZ2VudGluaWVuLXN1ZWRhbWVyaWthLXBhY2t0cmlwLXBmZXJkZS1yZWl0ZW4tYW5kZW4tbmF0dWNhdGUuanBn',
+        "Nature Travel Argentina",
+        'Become part of this fascinating trip and join a unique horse trekking excursion into this unparalleled landscape. Traveling on horseback is the best way to get an inside glimpse of this raw and wild land and the gaucho culture who spend summers tending their herds on the high ridges and valleys of the Andes. Besides exploring the magnificent landscape of the Patagonian Andes you’ll learn wilderness skills including backcountry horseback riding and the art of living confidently and respectfully in wild nature. Before and after your packtrip you will spend some time at a beautiful Patagonian horse ranch, nestled in the foothills of the Patagonian Andes and surrounded by nothing but pure nature.',
+        "0"),
+    Trips(
+        'https://imgproxy.natucate.com/6w5RXQOjRh10Lnk1Ux9HQzGNSynb6VCVVBOSq28cHLM/rs:fill/aHR0cHM6Ly93d3cubmF0dWNhdGUuY29tL21lZGlhL3BhZ2VzL3JlaXNlbi85ZWNlY2Y4Ny05Mjc4LTQ1NmMtYjgxNC05YWQ3Y2JjNTlhZWEvMTE4Nzk1Nzc5Ny0xNTgyNzE4OTYzL25hdHVycmVpc2Utc3VlZGxpY2hlcy1hZnJpa2EtcmFuZ2VyLXNjaG51cHBlcmt1cnMtZWxlZmFudC1uYXR1Y2F0ZS5qcGc',
+        "Nature Travel Southern Africa",
+        'Explore the African wild! You are a true nature lover, eager to dive into the African wilderness and curious about living the life of a safari guide? Then join our introductory bush adventure and be more than a mere spectator in Southern Africa’s unspoilt nature!During your 7- to 14-day bush experience in either South Africa or Botswana, nature will turn into your classroom: An highly experienced guide will lead you and your team through the wild landscapes of KwaZulu-Natal or the awe-inspiring Okavango Delta, teaching you fundamental field guide knowledge about animal behaviour, wildlife tracking and intricate ecosystems. At least one night will be spent under Africa’s breathtaking night sky, under the stars in your sleeping bag and surrounded by the sounds of the bush.Take the chance to experience Southern Africa’s nature in an in-depth way, witness stunning Big Five encounters and enjoy an educational and unforgettable wilderness adventure.',
+        "0"),
+    Trips(
+        'https://imgproxy.natucate.com/YDakafBN3phz1JDVkSKan4iUBeX2KGl2HxUvsPgrPi4/rs:fill/aHR0cHM6Ly93d3cubmF0dWNhdGUuY29tL21lZGlhL3BhZ2VzL3JlaXNlbi81MzJiMzMwYi05YmIwLTRiYzAtOWMzYi1kMjBkMWUxY2JkOGQvMjY2OTM5MTQxMi0xNjEwNDUxMzExL25hdHVycmVpc2Utc2Nod2VkZW4tc2Nod2VkaXNjaC1sYXBwbGFuZC1odXNreS1zY2hsaXR0ZW4tbmF0dWNhdGUuanBn',
+        "Nature Travel Sweden",
+        'Go on a winter safari in Swedish Lapland and experience the land of the Sámi in an unforgettable way For five days you will immerse yourself into Sweden\'s arctic natural landscapes and spend your days with a mix of exciting exploration tours, husky sleigh rides and Scandinavian sauna baths.You will witness the spectacular phenomenon of the northern lights, cross the border to the Arctic Circle and spend the night in traditional lavvu tents, surrounded by silence, wild animals and the untouched nature of Lapland.Your personal guide is always with you, teaching you tracking and bushcraft skills as well as interesting background information on conservation issues.',
+        "0"),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(
+          title: Text(
+            widget.title,
+            style: TextStyle(color: Colors.white),
+          ),
+        ),
+        body: Padding(
+          padding: EdgeInsets.only(right: 30, left: 30, top: 20),
+          child: ListView(
+            children: List.generate(
+                trips.length,
+                (index) => Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 10),
+                      child: PhotoHero(
+                        photo: trips[index].image,
+                        onTap: () {
+                          /// Default hero animations
+                          // Navigator.push(context,
+                          //     MaterialPageRoute(builder: (context) {
+                          //   return ItemPreview(
+                          //     trip: trips[index],
+                          //   );
+                          // }));
+                          //
+                          /// white page route hero animations
+                          Navigator.push(
+                            context,
+                            WhitePageRoute(
+                                enterPage: ItemPreview(
+                              trip: trips[index],
+                            )),
+                          );
+                        },
+                      ),
+                    )),
+          ), // This trailing comma makes auto-formatting nicer for build methods.
+        ));
+  }
+}

flutter_hero/lib/trips.dart

@@ -0,0 +1,8 @@
+class Trips {
+  String image;
+  String title;
+  String description;
+  String price;
+
+  Trips(this.image, this.title, this.description, this.price);
+}

flutter_hero/lib/ui/item_preview.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hero/widgets/photo.dart';
+
+import '../trips.dart';
+
+class ItemPreview extends StatefulWidget {
+  ItemPreview({Key key, this.trip}) : super(key: key);
+  final Trips trip;
+
+  @override
+  _ItemPreviewState createState() => _ItemPreviewState();
+}
+
+class _ItemPreviewState extends State<ItemPreview> {
+  final _box = SizedBox(
+    height: 15,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(
+          "Trip Details",
+          style: TextStyle(color: Colors.white),
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 30),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 10),
+              child: PhotoHero(
+                photo: widget.trip.image,
+                width: MediaQuery.of(context).size.width,
+              ),
+            ),
+            Text(widget.trip.title,
+                style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 24,
+                    color: Colors.green)),
+            _box,
+            Text(widget.trip.description,
+                style: TextStyle(fontSize: 16, color: Colors.grey)),
+            _box,
+          ],
+        ),
+      ),
+    );
+  }
+}

flutter_hero/lib/utils/white_transitions.dart

@@ -0,0 +1,23 @@
+//Create a transition that fades in the new view, while fading out a white background
+import 'package:flutter/material.dart';
+
+class WhitePageRoute extends PageRouteBuilder {
+  final Widget enterPage;
+
+  WhitePageRoute({this.enterPage})
+      : super(
+            transitionDuration: Duration(milliseconds: 1200),
+            pageBuilder: (context, animation, secondaryAnimation) => enterPage,
+            transitionsBuilder:
+                (context, animation, secondaryAnimation, child) {
+              var fadeIn = Tween<double>(begin: 0, end: 1).animate(
+                  CurvedAnimation(curve: Interval(.7, 1), parent: animation));
+              var fadeOut = Tween<double>(begin: 0, end: 1).animate(
+                  CurvedAnimation(curve: Interval(0, .2), parent: animation));
+              return Stack(children: <Widget>[
+                FadeTransition(
+                    opacity: fadeOut, child: Container(color: Colors.white)),
+                FadeTransition(opacity: fadeIn, child: child)
+              ]);
+            });
+}

flutter_hero/lib/widgets/main_slide_tile.dart

@@ -0,0 +1,62 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+/// the MainSlideTile slider item
+class MainSlideTile extends StatelessWidget {
+  MainSlideTile({
+    @required this.imagePath,
+    this.height = 177,
+    this.radius = 24,
+    this.fit = BoxFit.fill,
+  });
+
+  ///[imagePath] slide imagePath path
+  final String imagePath;
+
+  ///[height] slide imagePath height
+  final double height;
+
+  ///[radius] slide imagePath corners radius
+  final double radius;
+
+  ///[fit] slide imagePath fit style
+  final BoxFit fit;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+        borderRadius: BorderRadius.circular(radius),
+        child: imagePath == null || imagePath.isEmpty
+            ? placeHolder
+            : CachedNetworkImage(
+                imageUrl: imagePath,
+                imageBuilder: (context, imageProvider) => Container(
+                      height: height,
+                      width: height,
+                      decoration: BoxDecoration(
+                        color: Colors.grey[100],
+                        borderRadius: BorderRadius.all(Radius.circular(radius)),
+                        image: DecorationImage(
+                          image: imageProvider,
+                          fit: BoxFit.cover,
+                        ),
+                      ),
+                    ),
+                placeholder: (context, url) => placeHolder,
+                errorWidget: (context, url, error) => Icon(
+                      Icons.error,
+                      color: Colors.grey[300],
+                    )));
+  }
+
+  final Widget placeHolder = Center(
+      child: Container(
+    child: Center(
+        child: SizedBox(
+            width: 24,
+            height: 24,
+            child: CircularProgressIndicator(strokeWidth: 1))),
+    decoration: BoxDecoration(borderRadius: BorderRadius.circular(24.0)),
+  ));
+}

flutter_hero/lib/widgets/photo.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+import 'main_slide_tile.dart';
+
+class PhotoHero extends StatelessWidget {
+  const PhotoHero({Key key, this.photo, this.onTap, this.width})
+      : super(key: key);
+
+  final String photo;
+  final VoidCallback onTap;
+  final double width;
+
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      child: Hero(
+        tag: photo,
+        child: Material(
+          color: Colors.transparent,
+          child: InkWell(
+            onTap: onTap,
+            child: MainSlideTile(
+              imagePath: photo,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

flutter_hero/pubspec.yaml

@@ -0,0 +1,78 @@
+name: flutter_hero
+description: A new Flutter application.
+
+# The following line prevents the package from being accidentally published to
+# pub.dev using `pub publish`. This is preferred for private packages.
+publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+
+# The following defines the version and build number for your application.
+# A version number is three numbers separated by dots, like 1.2.43
+# followed by an optional build number separated by a +.
+# Both the version and the builder number may be overridden in flutter
+# build by specifying --build-name and --build-number, respectively.
+# In Android, build-name is used as versionName while build-number used as versionCode.
+# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
+# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
+# Read more about iOS versioning at
+# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
+version: 1.0.0+1
+
+environment:
+  sdk: ">=2.7.0 <3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+  # image cache
+  cached_network_image: ^3.0.0
+
+  # The following adds the Cupertino Icons font to your application.
+  # Use with the CupertinoIcons class for iOS style icons.
+  cupertino_icons: ^1.0.2
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the material Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #   - images/a_dot_burr.jpeg
+  #   - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/assets-and-images/#resolution-aware.
+
+  # For details regarding adding assets from package dependencies, see
+  # https://flutter.dev/assets-and-images/#from-packages
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts from package dependencies,
+  # see https://flutter.dev/custom-fonts/#from-packages