Как добавить боковую панель во флаттер

avatar
Zeeshan Ahmad
9 августа 2021 в 05:46
639
1
0

Я пытаюсь научиться создавать боковую панель и нашел это изображение в Интернете. Я успешно разработал простую боковую панель, но не могу спроектировать именно так. Поскольку я новичок во Flutter, я не знаю, как добавить эту форму кривой и анимировать при нажатии. Здесь мне нужна твоя помощь.

Here is the image

Вот что я сделал до сих пор:

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(),
      ),
    );
  }
}

Вот результат:

Источник

Ответы (1)

avatar
fr3ddie
9 августа 2021 в 10:30
0

Вместо этого:

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

Используйте что-то вроде ниже.

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

Этот код изменит только цвет индикатора выбора, а не будет каждый раз добавлять и изменять макет.

Проделайте то же самое с цветом элементов боковой панели.

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

Вы его ищете?

Zeeshan Ahmad
9 августа 2021 в 12:29
0

Я хочу добавить кривую ниже выбранной точки, чтобы при нажатии на элемент анимированная кривая появлялась под точкой, как на изображении выше.

fr3ddie
9 августа 2021 в 13:14
0

Проверьте ссылку ниже. Вероятно, CustomPaint это то, что вы ищете. youtube.com/watch?v=kp14Y4uHpHs

Zeeshan Ahmad
10 августа 2021 в 03:28
0

Не могли бы вы поделиться похожим фрагментом кода, из которого я могу извлечь уроки? Поскольку CustomPaint кажется сложной темой, любая помощь будет оценена по достоинству)

fr3ddie
10 августа 2021 в 10:00
0

Честно говоря, я никогда не использовал CustomPaint. Вы можете попробовать ссылку ниже. Там был кто-то, кто хотел нарисовать полукруг. Возможно, вам нужно что-то похожее на полукруг, чтобы анимировать его по вертикали (в зависимости от выбранного пункта меню). coderhelper.com/questions/57748469/…

fr3ddie
10 августа 2021 в 10:02
1

Я нашел программу для создания фигур и генерации флаттер-кода. Я думаю, это может вам очень помочь. shapemaker.web.app/#

Zeeshan Ahmad
10 августа 2021 в 10:34
0

Большое спасибо за ваши предложения. Я обязательно проверю их.

fr3ddie
10 августа 2021 в 10:56
0

Нет проблем, дайте мне знать, когда вы решите свою проблему;)

Zeeshan Ahmad
10 августа 2021 в 11:04
0

Конечно, я дам вам знать, если у меня получится это сделать.