0

I am trying to learn how to design a sidebar and I found this image online. I have successfully developed a simple side bar but am not able to design exactly like this. As I am new to Flutter I don't know how to add this curve shape and animate when tapped. This is where I need your help.

Here is the image

This what I've done so far:

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Home',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.red.withOpacity(0.3),
      ),
      backgroundColor: Colors.red.withOpacity(0.3),
      body: Row(
        children: [
          sideBar(),
        ],
      ),
    );
  }

  Widget sideBar() {
    final List<String> items = ['Snacks', 'Drinks', 'Food'];
    return Container(
      color: Colors.white,
      child: Column(
        children: items
            .map((e) => Padding(
                  padding: const EdgeInsets.all(14.0),
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        _selectedIndex = items.indexOf(e);
                      });
                    },
                    child: Row(
                      children: [
                        RotatedBox(quarterTurns: 3, child: Text(e)),
                        if (items.indexOf(e) == _selectedIndex)
                          const Padding(
                            padding: EdgeInsets.only(left: 8.0),
                            child: CircleAvatar(
                              backgroundColor: Colors.deepOrange,
                              radius: 5.0,
                            ),
                          )
                      ],
                    ),
                  ),
                ))
            .toList(),
      ),
    );
  }
}

Here is the output:

Zeeshan Ahmad
  • 606
  • 5
  • 19

1 Answers1

0

Instead of this:

if (items.indexOf(e) == _selectedIndex)
    const Padding(
    padding: EdgeInsets.only(left: 8.0),
    child: CircleAvatar(
        backgroundColor: Colors.deepOrange,
        radius: 5.0,
    ),
)

Use something like below.

Padding(
    padding: EdgeInsets.only(left: 8.0),
    child: CircleAvatar(
        backgroundColor: items.indexOf(e) == _selectedIndex 
            ? Colors.deepOrange 
            : Colors.transparent,
        radius: 5.0,
    ),
)

This code will only change the color of the selection indicator instead of every time adding and changing the layout.

Do the same with the sidebar items color.

RotatedBox(
    quarterTurns: 3, 
    child: Text(
        e, 
        style: TextStyle(
            color: items.indexOf(e) == _selectedIndex 
                ? Colors.black 
                : Colors.grey
        ),
    )
),

Is it for you looking for?

fr3ddie
  • 406
  • 6
  • 17
  • I want to add a curve below the selected point so that when an item is tapped an animated curve appears below the dot as in the above image. – Zeeshan Ahmad Aug 09 '21 at 12:29
  • Check the link below. Probably `CustomPaint` is it what you looking for. https://www.youtube.com/watch?v=kp14Y4uHpHs – fr3ddie Aug 09 '21 at 13:14
  • Can you please share a similar code snippet that I can learn from? As `CustomPaint` seems to be a complex topic, any help would be appreciated) – Zeeshan Ahmad Aug 10 '21 at 03:28
  • To be honest I have never used `CustomPaint`. You can try the link below. Over there was somebody who wanted to draw a semicircle. Maybe you need something similar to a semicircle to animate it vertically (on position depending on the selected menu item). https://stackoverflow.com/questions/57748469/flutter-how-to-draw-semicircle-half-circle – fr3ddie Aug 10 '21 at 10:00
  • 1
    I found a program to design shapes and which generate flutter code. It can help you a lot I think. https://shapemaker.web.app/#/ – fr3ddie Aug 10 '21 at 10:02
  • Thank you very much for your suggestions. I will definitely check them out. – Zeeshan Ahmad Aug 10 '21 at 10:34
  • No problem, let me know when you solve your problem ;) – fr3ddie Aug 10 '21 at 10:56
  • Sure, I'll let you know if I'm able to get it done. – Zeeshan Ahmad Aug 10 '21 at 11:04