GridView.count with Icon and Text columns inside takes too much space between lines

[ZP L]

I want to show a 2x2 GridView, each with a Icon and some information for description, here 

Widget _copyGrid(BuildContext context) {

return new Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: <Widget>[

new Icon(

IconData(0xe60d, fontFamily: 'iconfont'),

color: Colors.grey,

size: 48.0,

),

new Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

new Text(

'TiTle',

style: new TextStyle(

fontWeight: FontWeight.bold,

),

),

new Text(

'Description',

style: new TextStyle(

fontSize: 11.0,

),

)

],

),

],

);

}

Widget build(BuildContext context) {

return new GridView.count(

primary: false,

padding: const EdgeInsets.all(20.0),

crossAxisCount: 2,

children: <Widget>[

_copyGrid(context),

_copyGrid(context),

_copyGrid(context),

_copyGrid(context),

],

);

}

here's how it looks:

There's too much space between lines. I have checked mainAxisSpacing, crossAxisSpacing of GridView they all set default to minimum 0.0.

So how did the space comes?

[Prashant Singh]

Hello,

To know which widget is generating that space use this :

Import this package:

import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

and add this to main() function:

debugPaintSizeEnabled = true;

Prashant

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ZP L]

Thanks! here's the snapshot(I changed Column to a single Text)

May be GridView brings the space in, but how to control it? already checked all properties of GridView found nothing.

Prashant Singh <prashant...@gmail.com> 于2018年7月26日周四 下午3:54写道：

--

--刘志平

[ZP L]

No problem.

void main() {

runApp(new MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

SystemChrome.setPreferredOrientations([

DeviceOrientation.portraitUp,

DeviceOrientation.portraitDown,

]);

return new MaterialApp(

title: 'MyApp',

theme: new ThemeData(

// This is the theme of your application.

//

// Try running your application with "flutter run". You'll see the

// application has a blue toolbar. Then, without quitting the app, try

// changing the primarySwatch below to Colors.green and then invoke

// "hot reload" (press "r" in the console where you ran "flutter run",

// or press Run > Flutter Hot Reload in IntelliJ). Notice that the

// counter didn't reset back to zero; the application is not restarted.

primarySwatch: Colors.lightGreen,

),

home: new MyHomePage(title: 'MyApp'),

routes: routes,

);

}

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning

// that it has a State object (defined below) that contains fields that affect

// how it looks.

// This class is the configuration for the state. It holds the values (in this

// case the title) provided by the parent (in this case the App widget) and

// used by the build method of the State. Fields in a Widget subclass are

// always marked "final".

final String title;

@override

_MyHomePageState createState() => new _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

// This method is rerun every time setState is called, for instance as done

// by the _incrementCounter method above.

//

// The Flutter framework has been optimized to make rerunning build methods

// fast, so that you can just rebuild anything that needs updating rather

// than having to individually change instances of widgets.

return new Scaffold(

body: new GridView.count(

primary: false,

padding: const EdgeInsets.all(60.0),

crossAxisCount: 2,

children: <Widget>[

_copyGrid(context),

_copyGrid(context),

_copyGrid(context),

_copyGrid(context),

],

),

);

}

}

check the attachment for iconfont.

Prashant Singh <prashant...@gmail.com> 于2018年7月26日周四 下午6:32写道：

Hi,

Can you share the code if there's no privacy problem? Else try playing with padding or axisspacing properties.

Prashant

--

--刘志平

[Prashant Singh]

Just play with the childAspectRatio property of GridView. Check the result below. 

[ZP L]

It's working!

Prashant Singh <prashant...@gmail.com> 于2018年7月26日周四 下午7:15写道：

--

--刘志平