如何製作擴展和正方形的img部件

Question

我想同時擴大&正方形的「單元」，但在layout tutorial或源代碼中找不到某種類似的東西。可能嗎？

import 'package:flutter/material.dart'; 
import 'model.dart'; 
import 'package:flutter/painting.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     theme: new ThemeData(
      primarySwatch: Colors.blue, 
      ), 
     home: new MyHomePage(title: 'Flutter Demo Home Page'), 
     ); 
    } 
} 

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

    final String title; 

    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> { 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
      title: new Text(widget.title), 
      ), 
     drawer: new Menu(), 
     body: new Container(
      child: new Center(
      child: new G() 
     ), 
      padding: const EdgeInsets.all(5.0), 
     ), 
     ); 
    } 
} 


class Menu extends StatelessWidget { 

    @override 
    Widget build(BuildContext context) { 
    return new Drawer(
     child: new ListView(
     children: <Widget>[ 
      new DrawerHeader(
      child: new Text('Header'), 
     ), 
      new ListTile(
      title: new Text('Play'), 
      onTap:() {}, 
     ), 
      new ListTile(
      title: new Text('Do some'), 
      onTap:() {}, 
     ), 
      new ListTile(
      title: new Text('Exit'), 
      onTap:() { 
       Navigator.pop(context); 
      }, 
     ), 
     ], 
    ), 
     elevation: 2.0, 
    ); 
    } 
} 

class G extends StatefulWidget { 

    @override 
    State createState() => new GState(); 
} 

class Cell extends StatelessWidget { 
    final Color background; 
    Cell(this.background):super(); 

    @override 
    Widget build(BuildContext context) { 
    return 
     new ConstrainedBox(
      constraints: new BoxConstraints.expand(), 
      child: new DecoratedBox(
      decoration: new BoxDecoration(
       image: new DecorationImage(
       image: new AssetImage('images/r_w2.png'), 
       fit: BoxFit.scaleDown, 
      ), 
       border: new Border.all(color: Colors.purple), 
       boxShadow: <BoxShadow>[new BoxShadow(color: background)], 
      ), 
     ), 
    ); 
    } 
} 

class GState extends State<G>{ 
    final ChessModel chessModel = new ChessModel(); 
    final Color grey = Colors.blueGrey; 
    final Color white = Colors.white12; 

    @override 
    Widget build(BuildContext context) { 
    int size = ChessModel.FIELD_SIZE; 
    List<Widget> columns = generateList(size, (int i) => new Expanded(child: buildColumn(i, size))); 
    return new Row(
     mainAxisSize: MainAxisSize.min, 
     children: columns, 
    ); 
    } 

    List<Widget> generateList (int size, f) { 
    return new List<Widget>.from(new List<int>.generate(size, (i) => i+1).map(f)); 
    } 

    Color getBGColorByIndexes(int y, int x) { 
    return (y%2 == 0 && x%2 != 0) || (y%2 != 0 && x%2 == 0) ? grey: white; 
    } 
    Column buildColumn(int indexX, int size) { 
    List<Widget> cells = generateList(size, (int indexY) => new Expanded(child: new Cell(getBGColorByIndexes(indexY, indexX)))); 
    return new Column(
     mainAxisSize: MainAxisSize.min, 
     mainAxisAlignment: MainAxisAlignment.center, 
     children: cells 
    ); 
    } 
} 

P.S.S：有上撲（>〜5K線）任何大的開源項目？

Answer 1

如果您不需要滾動，則可以使用Row和Column在每個維度中均勻地佈置項目。用Expanded將你想要大小均勻的物品包裹起來。

如果您想要滾動，請嘗試GridView。

P.S. Fuchsia是一個使用Flutter的大型開源項目。儘管如此，這種問題並不適合Stack Overflow。