#128 implement guide detail view #147
Conversation
| textStyle: context.textTheme.body.copyWith(fontSize: 16), | ||
| ), | ||
| ), | ||
| ListView.separated( |
There was a problem hiding this comment.
oh damn. ListView inside a ListView and it works. Crazy but very good job :)
There was a problem hiding this comment.
That's because Stack Overflow and those 2 magic lines:
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
There was a problem hiding this comment.
Yeah I know but still crazy
| @@ -95,6 +96,10 @@ class AppRouter extends _$AppRouter { | |||
| path: "aboutUs", | |||
| page: AboutUsRoute.page, | |||
| ), | |||
| AutoRoute( | |||
| path: "guide-detail/:id", | |||
There was a problem hiding this comment.
i would change to just "guide/:id" - what you think?
There was a problem hiding this comment.
I agree - follows convention!
|
|
||
| // TODO(mikolaj-jalocha): add method parameter to navigate to guide detail. | ||
| Future<void> navigateGuideDetail() async { | ||
| await _router.push(GuideDetailRoute(id: "1")); |
There was a problem hiding this comment.
I guess i would already include this here as parameter and placed "1" in placeholder's invocation (in GestureDetector placeholder tile) . But it's obviously not that important, but we'll have one less place to change.
Screen Preview:
screen.mp4
Screenshots:
Loading Preview:
loading.webm
Notes:
When implementing the expansion tile, I took advantage of Flutter's built-in widget
ExpansionTile. It resembles Figma's design nearly 100%, except the show less/more icon button is bigger in the mockup than in reality.Customizing
ExpansionTileto have our own version of the icon requires slightly more coding since we need to configure the animation ourselves. I found one possible solution here. Please tell me what you think. ;)Figma's
ExpansionTileCurrent
ExpansionTile