Я пытаюсь научиться создавать боковую панель и нашел это изображение в Интернете. Я успешно разработал простую боковую панель, но не могу спроектировать именно так. Поскольку я новичок во Flutter, я не знаю, как добавить эту форму кривой и анимировать при нажатии. Здесь мне нужна твоя помощь.
Вот что я сделал до сих пор:
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(),
),
);
}
}
Вот результат:
Я хочу добавить кривую ниже выбранной точки, чтобы при нажатии на элемент анимированная кривая появлялась под точкой, как на изображении выше.
Проверьте ссылку ниже. Вероятно,
CustomPaint
это то, что вы ищете. youtube.com/watch?v=kp14Y4uHpHsНе могли бы вы поделиться похожим фрагментом кода, из которого я могу извлечь уроки? Поскольку
CustomPaint
кажется сложной темой, любая помощь будет оценена по достоинству)Честно говоря, я никогда не использовал
CustomPaint
. Вы можете попробовать ссылку ниже. Там был кто-то, кто хотел нарисовать полукруг. Возможно, вам нужно что-то похожее на полукруг, чтобы анимировать его по вертикали (в зависимости от выбранного пункта меню). coderhelper.com/questions/57748469/…Я нашел программу для создания фигур и генерации флаттер-кода. Я думаю, это может вам очень помочь. shapemaker.web.app/#
Большое спасибо за ваши предложения. Я обязательно проверю их.
Нет проблем, дайте мне знать, когда вы решите свою проблему;)
Конечно, я дам вам знать, если у меня получится это сделать.