Flutter ListView set 1 complete container at a time-CodePudding

I have a very simple ListView in which I have a container of full height

class TestApp extends StatelessWidget {
  final List<MessageItem> items;

  TestApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Mixed List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                physics: const BouncingScrollPhysics(
                    parent: AlwaysScrollableScrollPhysics()),
                itemCount: 3,
                itemBuilder: (context, index) {
                  return ColorsBox(context);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget ColorsBox(context) {
    return Container(
        height: MediaQuery.of(context).size.height * 1,
        color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
            .withOpacity(1.0));
  }
}

What I need to do is I need to set 1 container only at a time. Mean no half container will be shown only 1 colour container show on 1 time. If scroll then the second container then 3rd so on. Basically trying some TikTok stuff on ListView

CodePudding user response：

You should Use PageView.Builder

 PageController controller = PageController();
 var currentPageValue = 0.0;
 PageView.builder(
      scrollDirection: Axis.vertical,
      controller: controller,
      itemCount: 10,
      itemBuilder: (context, position) {
        return Container(
          color: position % 2 == 0 ? Colors.blue : Colors.pink,
          child: Center(
            child: Text(
              "Page",
              style: TextStyle(color: Colors.white, fontSize: 22.0),
            ),
          ),
        );
      },
    )

CodePudding user response：

It's already working Fine.

    return Container(
      margin: EdgeInsets.only(bottom: 15),
        height: MediaQuery.of(context).size.height,
        color: Colors.blue
            .withOpacity(1.0));
  }