{"id":952,"date":"2020-11-14T18:09:19","date_gmt":"2020-11-14T18:09:19","guid":{"rendered":"https:\/\/flutter4fun.com\/?p=952"},"modified":"2020-11-14T18:09:21","modified_gmt":"2020-11-14T18:09:21","slug":"ui-challenge-3","status":"publish","type":"post","link":"https:\/\/flutter4fun.com\/ui-challenge-3\/","title":{"rendered":"UI Challenge 3 – Game App UI by Tanmoy Roy"},"content":{"rendered":"\n
\"\"
Game App UI by Tanmoy Roy<\/a><\/figcaption><\/figure>\n\n\n\n

Hi folks.<\/p>\n\n\n\n

In this post, we are going to implement Game App UI by Tanmoy Roy<\/a> (check it in the Uplabs<\/a>).<\/p>\n\n\n\n

Let’s jump into implementation. As you may know, we have to split it into smaller problems and then we are going to implement them.<\/p>\n\n\n\n

1. Item row section<\/h3>\n\n\n\n

I think the most important part is the item’s row section.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To Implement this section, we should use a Stack<\/a> widget to overlay our views.
Firstly we should make the background section, we can use Container<\/a> and Transform<\/a> to implement it.<\/p>\n\n\n\n

Here we rotate our Container around the y-axis. You can read more about transform here<\/a>.<\/p>\n\n\n\n

\n
\n
Transform(\n  alignment: FractionalOffset.center,\n  transform: Matrix4.identity()\n    ..setEntry(3, 2, 0.01)\n    ..rotateY(radians(rotationY)), \/\/ degrees from slider\n  child: Container(\n    height: 180,\n    color: Colors.white.withOpacity(0.4),\n    margin: EdgeInsets.symmetric(horizontal: 40),\n  ),\n),<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Now we can find an appropriate number. for example I think 5 degrees is enough.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Okay. As you see there is a minor problem. Our shape is not centered anymore.
We need to wrap it by another Transform to translate it to the left.
And also we can implement rounded corners.<\/p>\n\n\n\n
\n
\n
Transform.translate(\n  offset: Offset(-30, 0),\n  child: Transform(\n    alignment: FractionalOffset.center,\n    transform: Matrix4.identity()\n      ..setEntry(3, 2, 0.01)\n      ..rotateY(radians(5)),\n    child: Container(\n      height: 180,\n      margin: EdgeInsets.symmetric(horizontal: 40),\n      decoration: BoxDecoration(\n        color: Colors.white.withOpacity(0.4),\n        borderRadius: BorderRadius.all(Radius.circular(22)),\n      ),\n    ),\n  ),\n),<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
(Keep in mind that we didn’t optimize it for all screens, we just hard-coded some values. You may face some problems with bigger screens.)<\/p>\n\n\n\n
Okay, now let’s add another Container below it:<\/p>\n\n\n\n
\n
\n
Stack(\n  alignment: Alignment.center,\n  children: [\n    Transform.translate(\n      offset: Offset(-10, 0),\n      child: Transform(\n        alignment: FractionalOffset.center,\n        transform: Matrix4.identity()\n          ..setEntry(3, 2, 0.01)\n          ..rotateY(radians(1.5)),\n        child: Container(\n          height: 216,\n          margin: EdgeInsets.symmetric(horizontal: 40),\n          decoration: BoxDecoration(\n            color: Colors.white.withOpacity(0.1),\n            borderRadius: BorderRadius.all(Radius.circular(22)),\n          ),\n        ),\n      ),\n    ),\n    Transform.translate(\n      offset: Offset(-44, 0),\n      child: Transform(\n        alignment: FractionalOffset.center,\n        transform: Matrix4.identity()\n          ..setEntry(3, 2, 0.01)\n          ..rotateY(radians(8)),\n        child: Container(\n          height: 188,\n          margin: EdgeInsets.symmetric(horizontal: 40),\n          decoration: BoxDecoration(\n            color: Colors.white.withOpacity(0.4),\n            borderRadius: BorderRadius.all(Radius.circular(22)),\n          ),\n        ),\n      ),\n    ),\n  ],\n),<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Great! Now it’s time to put our hero character image:<\/p>\n\n\n\n
\n
\n
Container(\n  height: rowHeight,\n  child: Stack(\n    alignment: Alignment.center,\n    children: [\n      Transform.translate(\n        offset: Offset(-10, 0),\n        child: Transform(\n          alignment: FractionalOffset.center,\n          transform: Matrix4.identity()\n            ..setEntry(3, 2, 0.01)\n            ..rotateY(radians(1.5)),\n          child: Container(\n            height: 216,\n            margin: EdgeInsets.symmetric(horizontal: 40),\n            decoration: BoxDecoration(\n              color: Colors.white.withOpacity(0.1),\n              borderRadius: BorderRadius.all(Radius.circular(22)),\n            ),\n          ),\n        ),\n      ),\n      Transform.translate(\n        offset: Offset(-44, 0),\n        child: Transform(\n          alignment: FractionalOffset.center,\n          transform: Matrix4.identity()\n            ..setEntry(3, 2, 0.01)\n            ..rotateY(radians(8)),\n          child: Container(\n            height: 188,\n            margin: EdgeInsets.symmetric(horizontal: 40),\n            decoration: BoxDecoration(\n              color: Colors.white.withOpacity(0.4),\n              borderRadius: BorderRadius.all(Radius.circular(22)),\n            ),\n          ),\n        ),\n      ),\n      Align(\n        alignment: Alignment.centerLeft,\n        child: Transform.translate(\n          offset: Offset(-30, 0),\n          child: Container(\n            child: Image.network(\n              'https:\/\/flutter4fun.com\/wp-content\/uploads\/2020\/11\/Player-1.png',\n              width: rowHeight,\n              height: rowHeight,\n            ),\n          ),\n        ),\n      ),\n    ],\n  ),\n);<\/pre>\n\n\n\n
Awesome! now we are going to implement the attributes section (those circles at the right of the character)<\/p>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
To do that we can use CustomPaint <\/a>widget.
We use canvas<\/a>.drawCircle<\/a> twice (first for a large circle, second for an inner circle) after that we have something like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Then we paint the progress bar using canvas<\/a>.drawArc<\/a>:<\/p>\n\n\n\n
\n
\n
class AttributePainter extends CustomPainter {\n  final double progressPercent;\n  final double strokeWidth, filledStrokeWidth;\n\n  final bgPaint, strokeBgPaint, strokeFilledPaint;\n\n  AttributePainter({\n    this.progressPercent,\n    this.strokeWidth = 4.0,\n    this.filledStrokeWidth = 8.0,\n  })  : bgPaint = Paint()..color = Colors.white.withOpacity(0.25),\n        strokeBgPaint = Paint()..color = Color(0xffD264C9),\n        strokeFilledPaint = Paint()\n          ..color = Colors.white\n          ..style = PaintingStyle.stroke\n          ..strokeWidth = filledStrokeWidth\n          ..strokeCap = StrokeCap.round;\n\n  @override\n  void paint(Canvas canvas, Size size) {\n    final center = Offset(size.width \/ 2, size.height \/ 2);\n    final radius = size.width \/ 2;\n\n    canvas.drawCircle(center, radius, bgPaint);\n    canvas.drawCircle(center, radius - strokeWidth, strokeBgPaint);\n    canvas.drawArc(\n      Rect.fromCircle(center: center, radius: radius - (strokeWidth \/ 2)),\n      -math.pi \/ 2, \/\/ - 45 degrees to start from top\n      (progressPercent \/ 100) * math.pi * 2,\n      false,\n      strokeFilledPaint,\n    );\n  }\n\n  @override\n  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;\n}<\/pre>\n\n\n\n
Okay, now we just need to put our image at the middle of our CustomPaint widget. Fortunately, CustomPaint widget has a child<\/code> property. It puts the child<\/code> property at the center of itself.<\/p>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
AttributeWidget(\n  progress: progress,\n  child: Image.network('https:\/\/flutter4fun.com\/wp-content\/uploads\/2020\/11\/speed.png'),\n)\n\nclass AttributeWidget extends StatelessWidget {\n  final double size;\n  final double progress;\n  final Widget child;\n\n  const AttributeWidget({\n    Key key,\n    @required this.progress,\n    this.size = 82,\n    this.child,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return CustomPaint(\n      painter: AttributePainter(\n        progressPercent: progress,\n      ),\n      size: Size(size, size),\n      child: Container(\n        padding: EdgeInsets.all(size \/ 3.8),\n        width: size,\n        height: size,\n        child: child,\n      ),\n    );\n  }\n}<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Fair enough, let’s back to the hero row widget. Now we can put attributes at the right of our character image. Then we use OutlineButton <\/a>for the “see details” button:<\/p>\n\n\n\n
\n
\n
Align(\n  alignment: Alignment.centerRight,\n  child: Container(\n    margin: EdgeInsets.only(right: 58),\n    padding: EdgeInsets.symmetric(vertical: 34),\n    child: Column(\n      mainAxisAlignment: MainAxisAlignment.spaceAround,\n      children: [\n        AttributeWidget(\n          progress: hero.speed,\n          child: Image.network(speed),\n        ),\n        AttributeWidget(\n          progress: hero.health,\n          child: Image.network(heart),\n        ),\n        AttributeWidget(\n          progress: hero.attack,\n          child: Image.network(knife),\n        ),\n        SizedBox(\n          height: 32,\n          child: OutlineButton(\n            child: new Text(\n              'See Details',\n              style: TextStyle(\n                color: Colors.white,\n                fontSize: 12,\n              ),\n            ),\n            onPressed: () {},\n            color: Colors.white,\n            borderSide: BorderSide(\n              color: Colors.white,\n              width: 1,\n            ),\n            highlightedBorderColor: Colors.white,\n            shape: RoundedRectangleBorder(\n              borderRadius: new BorderRadius.circular(30.0),\n            ),\n          ),\n        )\n      ],\n    ),\n  ),\n)<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Yay, we did it. now we can have a list to complete the first page.
Also, we need a gradient background, we can use Container <\/a>and BoxDecoration <\/a>to implement LinearGradient<\/a>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
So this is the result of the first part.<\/p>\n\n\n\n
2. Item details<\/h3>\n\n\n\n
In this part we are going to implement the details screen, see below image:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Before everything, we already know how to implement the gradient and the toolbar section. I will implement them without any explanation. <\/p>\n\n\n\n
\n
\n
Scaffold(\n  body: Container(\n    width: double.infinity,\n    height: double.infinity,\n    child: Stack(\n      children: [\n        SafeArea(\n          child: Row(\n            crossAxisAlignment: CrossAxisAlignment.center,\n            children: [\n              SizedBox(\n                width: 18,\n              ),\n              IconButton(\n                icon: Icon(\n                  Icons.arrow_back_ios,\n                  color: Colors.white,\n                  size: 20,\n                ),\n                onPressed: () {\n                  Navigator.of(context).pop();\n                },\n              ),\n              Text(\n                'Overview',\n                style: TextStyle(\n                  color: Colors.white,\n                  fontSize: 20,\n                  fontWeight: FontWeight.bold,\n                ),\n              ),\n              Expanded(\n                  child: Container(\n                height: 80,\n              )),\n              Container(\n                width: 80,\n                height: 80,\n                child: Icon(\n                  Icons.menu,\n                  color: Colors.white,\n                ),\n              )\n            ],\n          ),\n        ),\n        \/\/ _HeroDetailsImage(hero.image),\n      ],\n    ),\n    decoration: BoxDecoration(\n      gradient: LinearGradient(\n        colors: [\n          Color(0xFFF4E342),\n          Color(0xFFEE3474),\n        ],\n        begin: Alignment(0.3, -1),\n        end: Alignment(-0.8, 1),\n      ),\n    ),\n  ),\n);<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Now, let’s focus on the image section. There are 3 transparent layers and our selected hero image.
For the layers, we can use our previous section’s trick. We can combine 3 Containers using a Stack widget.
<\/p>\n\n\n\n
\n
\n
Padding(\n  padding: const EdgeInsets.all(28.0),\n  child: AspectRatio(\n    aspectRatio: 1,\n    child: Container(\n      child: Stack(\n        children: [\n          Align(\n            child: Container(\n              margin: EdgeInsets.only(\n                left: 16,\n                right: 16,\n                top: 16,\n              ),\n              decoration: BoxDecoration(\n                color: Colors.white.withOpacity(0.1),\n                borderRadius: BorderRadius.all(Radius.circular(28)),\n              ),\n            ),\n            alignment: Alignment.bottomCenter,\n          ),\n          Align(\n            child: Container(\n              margin: EdgeInsets.all(8.0),\n              decoration: BoxDecoration(\n                color: Colors.white.withOpacity(0.1),\n                borderRadius: BorderRadius.all(Radius.circular(28)),\n              ),\n            ),\n            alignment: Alignment.bottomCenter,\n          ),\n          Align(\n            child: Container(\n              margin: EdgeInsets.only(\n                bottom: 16,\n              ),\n              decoration: BoxDecoration(\n                color: Colors.white.withOpacity(0.4),\n                borderRadius: BorderRadius.all(Radius.circular(28)),\n              ),\n            ),\n            alignment: Alignment.bottomCenter,\n          ),\n        ],\n      ),\n    ),\n  ),\n);<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n\n\n\n
<\/p>\n<\/div>\n<\/div>\n\n\n\n
For the image, we can put it inside the front Container (the last Container):<\/p>\n\n\n\n
\n
\n
children: [\n  Align(\n    child: Container(\n      margin: EdgeInsets.only(\n        left: 16,\n        right: 16,\n        top: 16,\n      ),\n      decoration: BoxDecoration(\n        color: Colors.white.withOpacity(0.1),\n        borderRadius: BorderRadius.all(Radius.circular(28)),\n      ),\n    ),\n    alignment: Alignment.bottomCenter,\n  ),\n  Align(\n    child: Container(\n      margin: EdgeInsets.all(8.0),\n      decoration: BoxDecoration(\n        color: Colors.white.withOpacity(0.1),\n        borderRadius: BorderRadius.all(Radius.circular(28)),\n      ),\n    ),\n    alignment: Alignment.bottomCenter,\n  ),\n  Align(\n    child: Container(\n      margin: EdgeInsets.only(\n        bottom: 16,\n      ),\n      decoration: BoxDecoration(\n        color: Colors.white.withOpacity(0.4),\n        borderRadius: BorderRadius.all(Radius.circular(28)),\n      ),\n      child: Padding(\n        padding: EdgeInsets.all(8),\n        child: Center(\n          child: Image.network(url),\n        ),\n      ),\n    ),\n    alignment: Alignment.bottomCenter,\n  ),\n],<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Hero name<\/h4>\n\n\n\n
Now it’s time to implement the hero name section:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We can simply implement it by overlapping two Text <\/a>widgets using a Stack <\/a>widget:<\/p>\n\n\n\n
\n
\n
Stack(\n  children: [\n    Align(\n      alignment: Alignment.bottomCenter,\n      child: Text(\n        heroName,\n        style: TextStyle(\n          color: Colors.white,\n          fontWeight: FontWeight.bold,\n          fontSize: 42,\n        ),\n      ),\n    ),\n    Align(\n      alignment: Alignment.bottomCenter,\n      child: Padding(\n        padding: const EdgeInsets.only(bottom: 18.0),\n        child: Text(\n          heroName,\n          style: TextStyle(\n            color: Colors.white.withOpacity(0.1),\n            fontWeight: FontWeight.bold,\n            fontSize: 56,\n          ),\n        ),\n      ),\n    )\n  ],\n),<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
After that, I added the remaining sections. Because they are not challenging enough, I skipped to explain them. It saves our time \ud83d\ude09<\/p>\n\n\n\n
BTW, here is the final result of the second page:<\/p>\n\n\n\n
\n
\n
ListView(\n  controller: _scrollController,\n  padding: EdgeInsets.only(top: appBarHeight),\n  children: [\n    _HeroDetailsImage(widget.hero.image),\n    _HeroDetailsName(widget.hero.name),\n    Padding(\n      padding: const EdgeInsets.symmetric(horizontal: 22.0, vertical: 12),\n      child: Text(\n        \"Super smash bros ultimate villagers from the animal crossing series. This troops fight most effectively in large group\",\n        style:\n            TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w300),\n        textAlign: TextAlign.center,\n      ),\n    ),\n    SizedBox(height: 28,),\n    Row(\n      children: [\n        SizedBox(\n          width: 28,\n        ),\n        Expanded(\n          child: Container(\n            height: 54,\n            child: OutlineButton(\n              child: new Text(\n                'Add Favourite',\n                style: TextStyle(\n                  color: Colors.white,\n                  fontSize: 12,\n                ),\n              ),\n              onPressed: () {},\n              color: Colors.white,\n              borderSide: BorderSide(\n                color: Colors.white,\n                width: 1,\n              ),\n              highlightedBorderColor: Colors.white,\n              shape: RoundedRectangleBorder(\n                borderRadius: new BorderRadius.circular(30.0),\n              ),\n            ),\n          ),\n        ),\n        SizedBox(\n          width: 14,\n        ),\n        Expanded(\n          child: Container(\n            height: 56,\n            child: RaisedButton(\n              onPressed: () {},\n              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),\n              padding: const EdgeInsets.all(0.0),\n              child: Ink(\n                decoration: const BoxDecoration(\n                  gradient: LinearGradient(\n                    colors: [\n                      Color(0xFFF29758),\n                      Color(0xFFEF5D67),\n                    ],\n                    begin: Alignment.topCenter,\n                    end: Alignment.bottomCenter\n                  ),\n                  borderRadius: BorderRadius.all(Radius.circular(80.0)),\n                ),\n                child: Container(\n                  constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0),\n                  \/\/ min sizes for Material buttons\n                  alignment: Alignment.center,\n                  child: const Text(\n                    'OK',\n                    style: TextStyle(color: Colors.white),\n                  ),\n                ),\n              ),\n            ),\n          ),\n        ),\n        SizedBox(\n          width: 28,\n        ),\n      ],\n    ),\n    SizedBox(height: 28,),\n  ],\n)<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Now I wanna use the Hero <\/a>widget to animate the selected Item into the details page.<\/p>\n\n\n\n
And here you go. This is our final result \ud83d\ude42
You can find the source code here<\/a>.<\/p>\n\n\n\n
Don’t forget to give me feedback in the comments section.<\/p>\n\n\n\n
\n