Question 202454 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: Change the render order of widget inside a stack

I have the following tile which has 2 modes (active & completed)enter image description here

enter image description here

My goal is to render the checkmark infront of the semi transparent white background.

Here’s my code:

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 4.0),
      child: Stack(
        children: [
          // active tile
          tileActive(), // the tile + checkmark
          // completed tile
          tileComplete(), // the white overlay only
        ],
      ),
    );
  }

What would be a good way of implementing that?
Thanks!

Tags:

2

Answers


  1. 0

    You can do this by adding state condition. And you must rebuid your titleActive() every time you change state

    // adding mode to state
int state = 0; // 0 - active, 1 - completed

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 4.0),
    child: Stack(
      children: [
        // active tile
        if (state == 0) tileActive(), // the tile + checkmark
        // completed tile
        tileComplete(), // the white overlay only
        if (state == 1) tileActive(), // if state is "complete", move active title back
      ],
    ),
  );
}
    Login or Signup to reply.
  2. 0 
     You just show/hide overlaywidget() with some conditions

 return Padding(
        padding: const EdgeInsets.only(bottom: 4.0),
        child: Stack(
          children: [
              tileActive(), // the tile + checkmark
              if(active == 0)
               Overlaywidget(), // transparent white background
          ],
        ),
      );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search