Having difficulty with a Flutter layout which includes an appBar() at the top, a BottomNavigationWidget() at the bottom and content in the middle that is vertically scrollable but has horizontal list views as well. The problem is I continue to run into viewport errors that vary in their specificity, no matter what I attempt to correct or modify related to the SingleChildScrollView() that sits beneath the appBar().

I've constructed that layout like so below however you can't scroll vertically, only horizontally on each included buildCategory method despite being wrapped in a SingleChildScrollView and contained within a Column. If I deviate from this I get layout exceptions thrown.

Widget appBar() {
  return AppBar(
            title: const Text("Welcome"),
            centerTitle: true,
            backgroundColor: Colors.transparent
          );
}

Widget horizontalContent(int filter) {
  return FutureBuilder<List<ItemDetails>>(
    future: getContent(http.Client(), filter),
    builder: (context, snapshot) {
      if (snapshot.hasError) {
        return const Center(
          child: Text('Error.'),
        );
      } else if (snapshot.hasData) {
        return ContentList(photos: snapshot.data!);
      } else {
        return const Center(
          child: CircularProgressIndicator(),
        );
      }
    },
  );
}

Widget buildCategory(String title, int category) {
  return Flexible(
    child: ListView(
      shrinkWrap: true,
      children: [
        Padding(
          padding: const EdgeInsets.all(5.0),
          child:
              Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            TitleWidget(
                titleText: title,
                titleAlign: TextAlign.right),
            SmallButton(
                buttonText: "Details",
                onPressed: () => {},
                )
          ]),
        ),
        SizedBox(height: 200, child: horizontalContent(filter))
      ],
    ),
  );
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      bottomNavigationBar: BottomNavigationWidget(),
      body: Stack(
        children: <Widget>[
          Container(
              width: double.infinity,
              height: double.infinity,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color.fromRGBO(0, 85, 85, 85),
                    Color.fromRGBO(0, 66, 66, 66),
                    Color.fromRGBO(0, 0, 0, 0),
                  ],
                  stops: [0.0, 0.3],
                ),
              ),
              child:
                  Image.asset("images/background.png", fit: BoxFit.cover)),
          appBar(),
         SingleChildScrollView(
              child: Column(mainAxisSize: MainAxisSize.min, children: [
            buildCategory("title", 0),
            buildCategory("title", 1),
            buildCategory("title", 2),
            buildCategory("title", 3),
            buildCategory("title", 4),
            buildCategory("title", 5),
            buildCategory("title", 6),
          ])),
           
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[BottomNavigationWidget()],
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

On your Scaffold use appBar and

  AppBar appBar() {
    return AppBar(
        title: const Text("Welcome"),
        centerTitle: true,
        backgroundColor: Colors.transparent);
  }

 return Scaffold(
  appBar: appBar(),
// bottomNavigationBar: ,
  body: ListView.builder( // top level listView
    itemCount: 44,
    itemBuilder: (context, index) {
      return Container(
        height: 200, // must provide based on your preference
        child: Column(
          children: [
            Row(
              children: [
                Text("header $index"),
              ],
            ),
            Expanded(
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 33,
                itemBuilder: (context, index) => Container(
                  width: 200,
                  height: 100,
                  child: Text("hrIem"),
                ),
              ),
            ),
          ],
        ),
      );
    },
  ),
);

CodePudding user response：

Try this

Scaffold(
    extendBodyBehindAppBar: true,
    appBar: appBar(),
    bottomNavigationBar: BottomNavigationWidget(),
    body: ListView(
     children: [
       SizedBox(
          height: 300, // give your height
          SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Column(
           mainAxisSize: MainAxisSize.min, children: [
            buildCategory("title", 0),
            buildCategory("title", 1),
            buildCategory("title", 2),
            buildCategory("title", 3),
            buildCategory("title", 4),
            buildCategory("title", 5),
            buildCategory("title", 6),
          ]
        )
       ),
      ),


    SizedBox(
          height: 300, // give your height
          SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Column(
           mainAxisSize: MainAxisSize.min, children: [
            buildCategory("title", 0),
            buildCategory("title", 1),
            buildCategory("title", 2),
            buildCategory("title", 3),
            buildCategory("title", 4),
            buildCategory("title", 5),
            buildCategory("title", 6),
          ]
        )
       ),
      )
    ]
  ),
)