Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 18, 2022 08:52 pm GMT

Day 2: crafting HAPOC UI

I thought I will finish the UI fast since it's not a very complicated interface, but I had to learn how to make custom 3D buttons in Flutter. I didn't think about how the button should look like when doing the UX, it was a design decision when I finished off the main screen.


it's a game right? it has to offer some interactive experience. so I looked up few tutorials and source codes on Github, here are the two Githubs that actually helped me:


  1. Clicky buttonvery intense 3D shape and satisfying to click on and watch it bounce. Preview
  2. Button3Dvery simple and straightforward, unlike Clicky Button it has two shapes and gives the illusion of a 3D button viewed from angel between top and front. PreviewThe button I created is inspired by both source codes above, it is like Clicky in animation and Button3D in design.

In Button3D the design is two widget above each other, the top is triggered when pressed and the bottom (I called it _body()) is static, both are wrapped in Stack() => GestureDetector() the GestureDetector() job is to toggle between true and false when tap detected, and because the top widget returns AnimatedPosition() I can play with the Duration() to achieve smooth animation.



here is the top widget, the one that detects taps:

Widget _topFace() {    return AnimatedPadding(      duration: Duration(milliseconds:600),      curve: Curves.ease,      padding: EdgeInsets.only(bottom: isTapped ? 0.0 : 20.0),      child: Container(        decoration: BoxDecoration(            color: Colors.red,            borderRadius: BorderRadius.circular(5.0)),        child: Padding(          padding: EdgeInsets.symmetric(              vertical: 18.0, horizontal: 18.0),          child: LimitedBox(            maxWidth: MediaQuery.maybeOf(context)!.size.width *.9,            child: Text(              "Click me",              style: TextStyle(color: Colors.white),            ),          ),        ),      ),    );  }

The important variable in above widget is isTapped the key to the juicey movements lol, it is false by default and changes to true only when onTapDown // finger is not lifted or moved from its position in GestureDetector() is triggered, then setState(() => istapped = false); when onTapup // finger lifted from the screen and onTapCanceled // finger slid from its position, also the VoidCallback onPressed() is detected when onTapUp is triggered, because user lift the finger after "press" action is done as a complete action and expect feedback.



here is the methods for detecting gestures:

void _tapDown(TapDownDetails details) {    setState(() {      isTapped = true;    });  }  void _tapCancel() {    setState(() {      isTapped = false;    });  }  void _tapUp(TapUpDetails details) {    setState(() {      isTapped = false;    });    widget.onPressed();  }

the static Widget _body(){...} that doesn't animate or interact with click event, or any event:

Widget _body() {    return Container(      decoration: BoxDecoration(        color: Colors.blue,        borderRadius: BorderRadius.circular(5.0),      ),      child: Padding(        padding: EdgeInsets.symmetric(            vertical: 18.0, horizontal: 18.0 - .1),        child: LimitedBox(          maxWidth: MediaQuery.maybeOf(context)!.size.width * .9,          child: Visibility(            visible: false,            maintainAnimation: true,            maintainSize: true,            maintainState: true,            child: Text(              "Click Me",              style: TextStyle(color: Colors.blue),            ),          ),        ),      ),    );  }

you can see useless Text() widget in the static Widget _body(){...} with visibility: false, it's because I set the Widget _topFace(){...} to wrap the Text() and I could not achieve that without setting copy of the Text() in the Widget _body(){...} otherwise it will wrap on itself and be smaller than Widget _topFace(){...}





check the complete code


Original Link: https://dev.to/fathidevs/day-2-crafting-hapoc-ui-1p8p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To