Flutter - 使用 Column/Expanded/ListView 的布局问题

Question

I'm pretty new to Flutter and I can't seem to solve this issue.

I want to display a ListView of my custom card-like Ink containers and have pretty much achieved it. However, the ListView extends behind my Text widget (the previous item in the column) when I scroll down:

Expanded widget behind text widget

Look behind the "Gallery" text when scrolling: Animated GIF showing undesired behavior

I would like my ListView widget to scroll without the containers displaying behind the "Gallery" text.

I have tried without an Expanded widget (ListView.builder() directly under the Column children) but I get this error message in the Debug console:

════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderRepaintBoundary#8dc77 relayoutBoundary=up8 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize' The relevant error-causing widget was Column

And the list does not display at all.

Here's my code:

class Gallery extends StatelessWidget {

  final List<_ChallengeCard> challengestest = [
    _ChallengeCard(title: 'Challenge #1', subtitle: 'Completed on 13/11/1978'),
    _ChallengeCard(title: 'Challenge #2', subtitle: 'Completed on 12/18/2043'),
    _ChallengeCard(title: 'Challenge #3', subtitle: 'Current challenge'),
    _ChallengeCard(title: 'Challenge #4', subtitle: 'Locked'),
    _ChallengeCard(title: 'Challenge #5', subtitle: 'Locked'),
    _ChallengeCard(title: 'Challenge #6', subtitle: 'Locked'),
    _ChallengeCard(title: 'Challenge #7', subtitle: 'Locked'),
    ];

    Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                Text(
                'Gallery',
                style: GoogleFonts.alexBrush(fontSize: 55),
                textAlign: TextAlign.center,
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: challengestest.length,
                    itemBuilder: (context, index){
                    return Container(
                      padding: EdgeInsets.symmetric(vertical: 8.0),
                      child: InkWell(
                        onTap: (){},
                        child: challengestest[index]
                      ),
                    );
                    },
                  ),
                ),
              ],
            ),
        );
      }
    }

And some additionnal classes so that you can see the specific content of the ListView item (but I doubt they have anything to do with the issue):

class _ChallengeCard extends StatelessWidget {
  _ChallengeCard({
    Key key,
    this.title,
    this.subtitle,
  }) : super(key: key);

  final String title;
  final String subtitle;

  @override
  Widget build(BuildContext context) {
    return Ink(
      padding: EdgeInsets.all(11.0),
      decoration: BoxDecoration(
        color: Color(0xFF11001A),
        borderRadius: BorderRadius.all(Radius.circular(10.0))),
      child: Container(
        alignment: Alignment.topLeft,
        child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Icon(Icons.star,color: Colors.white, size: 40.0,),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children:<Widget>[
              Text(
                '$title',
                style: GoogleFonts.lora(fontSize: 25),
              ),
              Text(
                '$subtitle',
                style: GoogleFonts.lora(fontSize: 15),
              ),
            ],
          ),
        ],
        ),
      ),
    );
  }
}

The class "gallery" is called from the main.dart file (which is why there is a bottom navigation bar in the whole app), but I haven't included it since it is not relevant to the issue.

Thanks in advance!

Answer 1

You can make your text scroll also by wrapping your widget in a single child scroll view

   ...

   SingleChildScrollView(// add a scrollview
                child: 
              Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Text(
                    'Gallery',
                 style: GoogleFonts.alexBrush(fontSize: 55),
                    textAlign: TextAlign.center,
                    ), 
                    //remove the expanded widget
                  ListView.builder(
                    shrinkWrap: true, // make shrikwrap true
                        physics: NeverScrollableScrollPhysics(), // add this physics so it won't scroll
                        itemCount: challengestest.length,
                        itemBuilder: (context, index){
                        return Container(
                        ... // rest of your code here
);}
),
]))

Answer 2

I finally got it to work by using the AppBar widget instead of a Text widget for the "Gallery" title.

The Scaffold does not contain a Column widget anymore, only a ListView.Builder:

  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
                shrinkWrap: true,
                itemCount: challengestest.length,
                itemBuilder: (context, index){
                  return Container(
                    padding: EdgeInsets.symmetric(vertical: 8.0),
                    child: InkWell(
                      onTap: (){},
                      child: challengestest[index]
                    ),
                  );
                },
              ),
    );
  }

The text "Gallery" has been moved as a heavily modified AppBar with a Stack widget to retain its appearance:

   Stack(
      children: <Widget>[
        Image.asset(
            "assets/images/bgpurple.jpeg",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
        Scaffold(
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(85.0),
            child: AppBar(
              automaticallyImplyLeading: false,
              elevation: 0.0,
              backgroundColor: Colors.transparent,
              centerTitle: true,
              flexibleSpace: Padding(
                padding: const EdgeInsets.only(top: 60.0),
                child: Center(
                  child: Text(
                    _myPageTitles[_selectedIndex],
                    style: GoogleFonts.alexBrush(
                      fontSize: 45, 
                      color: Colors.white,
                      )
                    ),
                ),
              ),
            ),
          ),