简体   繁体   中英

ListView in flutter

We are needing to place a column of rounded edge containers in a list view, when i wrap them in the listview they dont show up, I'm new to flutter so im sure i am missing something. Im adding ascreenshot of the design that doesnt scroll, these containers will load dynamically and scroll once i can get the listview working.

Screenshot

屏幕

Here is the code for the screen

import 'package:flutter/material.dart';
import 'package:lightbridge_mobile/ui/gradient_app_bar.dart';
import 'package:lightbridge_mobile/ui/widget_container.dart';



class WidgetsPage extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
 return new Scaffold(
  body: Container(
    decoration: BoxDecoration(
        gradient: new LinearGradient(
            colors: [Color.fromRGBO(1,89,99, 1.0), Colors.grey],
            begin: Alignment.bottomLeft,
            end: Alignment.topRight
        )
    ),
     child: Column(
     mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
      new WidgetContainer(),
      new WidgetContainer(),
      new WidgetContainer(),

      ],
     ),
  )
   );
    }
}

Here is the code for the widget containers

class WidgetContainer extends StatelessWidget {
@override
 Widget build(BuildContext context) {
   return new WidgetRow();
   }
 }

Here is the widget row code

class WidgetRow extends StatelessWidget {
 @override Widget build(BuildContext context) {
 return new Container(
   height: 160.0,
   margin: const EdgeInsets.symmetric(
     vertical: 16.0,
     horizontal: 24.0,
   ),
  child: new Stack(
    children: <Widget>[
      widgetCard,
      widgetThumbnail,
    ],
  )
);
}

 final widgetCard = new Container(

  child: Row(
    children: <Widget>[

    ],
  ),
  height: 160.0,
  margin: new EdgeInsets.only(left: 0.0),
  decoration: new BoxDecoration(
  color: Colors.white70.withOpacity(0.25),
  shape: BoxShape.rectangle,
  borderRadius: new BorderRadius.circular(8.0),
  boxShadow: <BoxShadow>[
    new BoxShadow(  
     color: Colors.black12,
     blurRadius: 10.0,
     offset: new Offset(0.0, 10.0),
   ),
    ],
  ),
);

 final widgetThumbnail = new Container(
      margin: new EdgeInsets.symmetric(
      vertical: 10.0,
      horizontal: 10.0,
 ),
 alignment: FractionalOffset.topLeft,
 child: new  Icon(
                     FontAwesomeIcons.comments,
                     size: 40.0,
                      color: Colors.white70,
             ),
    );
  }

Instead of Column use - ListView directly. don't wrap it.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Container(
      decoration: BoxDecoration(
          gradient: new LinearGradient(
              colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
              begin: Alignment.bottomLeft,
              end: Alignment.topRight)),
      child: ListView(
        children: <Widget>[
          new WidgetContainer(),
          new WidgetContainer(),
          new WidgetContainer(),
          new WidgetContainer(),
          new WidgetContainer(),
          new WidgetContainer(),
        ],
      ),
    ),
    );
  }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM