Я пытаюсь увеличить размер контейнера, используя метод GestureDetector onTap. Но когда я нажимаю на контейнер, ничего не происходит. Я не могу понять, что не так? Не могли бы вы предложить мне какой-либо другой способ или любой пакет, который может дать тот же результат.
class DemoPage extends StatefulWidget {
@override
State<DemoPage> createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
CustomContainer container = CustomContainer();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
container.expandContainer();
});
},
child: container,
)),
);
}
}
class CustomContainer extends StatelessWidget {
Container _container = Container(
color: Colors.yellow,
width: 200.0,
height: 100.0,
);
void expandContainer() {
//Assignment Operator used with Ternary operator
_container = _container ==
Container(
color: Colors.yellow,
width: 200.0,
height: 300.0,
)
? Container(
color: Colors.yellow,
width: 200.0,
height: 100.0,
)
: Container(
color: Colors.yellow,
width: 200.0,
height: 300.0,
);
}
@override
Widget build(BuildContext context) {
return _container;
}
}
Вы сравниваете виджет с другим виджетом, я думаю, вам следует сравнить высоту виджета
Мы пытаемся изменить CustomContainer
, который является виджетом без сохранения состояния,
Я предпочитаю использовать AnimatedContainer
для таких случаев.
class DemoPage extends StatefulWidget {
const DemoPage({Key? key}) : super(key: key);
@override
State<DemoPage> createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
bool isExanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
isExanded = !isExanded;
});
print("tapped");
},
child: AnimatedContainer(
color: Colors.yellow,
width: 200.0,
height: isExanded ? 300 : 100.0,
duration: const Duration(seconds: 2),
),
)),
);
}
}
просто сравните высоту контейнера. В
expandContainer
просто попробуйте _container.height == 300 ? _container.height = 100 : _container.height = 300