Hero details card added.

pinkeshdarji · May 21, 2019 · 356473e · 356473e
1 parent 363ef20
commit 356473e
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 18 deletions.
diff --git a/assets/images/A1.jpg b/assets/images/A1.jpg
diff --git a/assets/images/A2.jpg b/assets/images/A2.jpg
diff --git a/assets/images/mLogo.png b/assets/images/mLogo.png
diff --git a/assets/images/marvelLogo.png b/assets/images/marvelLogo.png
diff --git a/assets/images/marvel_red.png b/assets/images/marvel_red.png
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-
-import 'ui/home.dart';
+import 'package:super_hero_interaction/ui/home.dart';
 
 void main() => runApp(MyApp());
 

diff --git a/lib/ui/hero_card.dart b/lib/ui/hero_card.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:super_hero_interaction/models/character.dart';
 
+import 'hero_detail.dart';
+
 class HeroCard extends StatelessWidget {
   final Character character;
   final double characterScaleFactor;
@@ -40,10 +42,13 @@ class HeroCard extends StatelessWidget {
             children: <Widget>[
               Transform.scale(
                 scale: characterScaleFactor,
-                child: Image.asset(
-                  character.url,
-                  height: MediaQuery.of(context).size.height * 0.5,
-                  width: MediaQuery.of(context).size.width,
+                child: Hero(
+                  tag: character.url,
+                  child: Image.asset(
+                    character.url,
+                    height: MediaQuery.of(context).size.height * 0.5,
+                    width: MediaQuery.of(context).size.width,
+                  ),
                 ),
               ),
               Padding(
@@ -70,18 +75,29 @@ class HeroCard extends StatelessWidget {
                       height: 20,
                       width: 100,
                     ),
-                    Row(
-                      children: <Widget>[
-                        Text(
-                          "Know more ",
-                          style: textKnowMore,
-                        ),
-                        Icon(
-                          Icons.arrow_forward_ios,
-                          size: 15,
-                          color: Colors.amber,
-                        )
-                      ],
+                    GestureDetector(
+                      onTap: () {
+                        Navigator.push(
+                          context,
+                          MaterialPageRoute(
+                              builder: (context) => HeroDetail(
+                                    character: character,
+                                  )),
+                        );
+                      },
+                      child: Row(
+                        children: <Widget>[
+                          Text(
+                            "Know more ",
+                            style: textKnowMore,
+                          ),
+                          Icon(
+                            Icons.arrow_forward_ios,
+                            size: 15,
+                            color: Colors.amber,
+                          )
+                        ],
+                      ),
                     ),
                   ],
                 ),

diff --git a/lib/ui/hero_detail.dart b/lib/ui/hero_detail.dart
@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+import 'package:super_hero_interaction/models/character.dart';
+
+class HeroDetail extends StatefulWidget {
+  final Character character;
+
+  HeroDetail({Key key, this.character}) : super(key: key);
+
+  @override
+  _HeroDetailState createState() => _HeroDetailState();
+}
+
+class _HeroDetailState extends State<HeroDetail> with TickerProviderStateMixin {
+  int _bgColor;
+  Animation<Offset> animation;
+  AnimationController animationController;
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+
+    String colorString =
+        "0xff${widget.character.background}".replaceAll("#", "");
+    _bgColor = int.parse(colorString);
+
+    animationController =
+        AnimationController(vsync: this, duration: Duration(milliseconds: 700));
+    animation = Tween<Offset>(begin: Offset(0, 0), end: Offset(0, -1.0))
+        .animate(animationController);
+
+    Future.delayed(Duration(milliseconds: 500), () {
+      animationController.forward();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    TextStyle display3 =
+        Theme.of(context).textTheme.display3.copyWith(color: Colors.black);
+    TextStyle title =
+        Theme.of(context).textTheme.title.copyWith(color: Colors.black);
+
+    return Scaffold(
+        backgroundColor: Colors.white,
+        body: Stack(
+          children: <Widget>[
+            SlideTransition(
+              position: animation,
+              child: Container(
+                decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                        begin: AlignmentDirectional.topCenter,
+                        end: AlignmentDirectional.bottomCenter,
+                        stops: [0.9, 1.0],
+                        colors: [Color(_bgColor), Colors.white70])),
+                width: MediaQuery.of(context).size.width,
+                height: MediaQuery.of(context).size.height,
+              ),
+            ),
+            Container(
+              padding: EdgeInsets.only(top: 34, left: 24, right: 34),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  Stack(
+                    children: <Widget>[
+                      Hero(
+                        tag: widget.character.url,
+                        child: Image.asset(
+                          widget.character.url,
+                          height: MediaQuery.of(context).size.height * 0.5,
+                          width: MediaQuery.of(context).size.width,
+                        ),
+                      ),
+                      IconButton(
+                          icon: Icon(
+                            Icons.arrow_back_ios,
+                            color: Colors.black,
+                            size: 18,
+                          ),
+                          onPressed: () {
+                            Navigator.pop(context);
+                          })
+                    ],
+                  ),
+                  Container(
+                    width: MediaQuery.of(context).size.width * 0.55,
+                    child: Text(
+                      widget.character.name.toLowerCase(),
+                      style: display3,
+                    ),
+                  ),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: <Widget>[
+                      Text(
+                        widget.character.actor.toLowerCase(),
+                        style: title,
+                      ),
+                      Image.asset(
+                        'assets/images/marvelLogo.png',
+                        width: 60,
+                        height: 50,
+                      )
+                    ],
+                  ),
+                  Text(
+                    widget.character.description,
+                    maxLines: 3,
+                    style: TextStyle(color: Colors.grey),
+                  ),
+                  Divider(),
+                  Text(
+                    "movies",
+                    style: title,
+                  ),
+                  Expanded(
+                    child: GridView.count(
+                      // Create a grid with 2 columns. If you change the scrollDirection to
+                      // horizontal, this would produce 2 rows.
+                      crossAxisCount: 2,
+                      crossAxisSpacing: 30,
+                      mainAxisSpacing: 10,
+                      // Generate 100 Widgets that display their index in the List
+                      children: List.generate(2, (index) {
+                        return Container(
+                          decoration: BoxDecoration(
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(12)),
+                              color: Colors.redAccent,
+                              image: DecorationImage(
+                                  image: AssetImage(
+                                      'assets/images/A${index + 1}.jpg'),
+                                  fit: BoxFit.cover)),
+                        );
+                      }),
+                    ),
+                  ),
+                ],
+              ),
+            )
+          ],
+        ));
+  }
+}