Is there a way to include Multiple Children inside a Container?

问题

This is full code:

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
       body: new Container(
         color: Color(0xff258DED),
         height: 400.0,
         alignment: Alignment.center,
         child: new Container(
           height: 200.0,
           width: 200.0,
           decoration: new BoxDecoration(
             image: DecorationImage(
                 image: new AssetImage('assets/logo.png'),
             fit: BoxFit.fill
             ),
             shape: BoxShape.circle
           ),
         ),
         child: new Container(
          child: new Text('Welcome to Prime Message',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontFamily: 'Aleo',
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.bold,
                fontSize: 25.0,
                color: Colors.white
            ),
          ),
         ),
        ),
      ),
    );
  }
}

I tried to add a Container on top and then added two children inside it. First child works fine, but second child giving me error like "the argument for the named parameter 'child' was already specified".

回答1:

If you try to put more than one child in a container, you want to look as Row() or Column() class for linear ones. Stack() is used if you want to have floating children on top of each other.

Eg:

class Application extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            home: new Scaffold(
                body: new Container(
                    color: Color(0xff258DED),
                    height: 400.0,
                    alignment: Alignment.center,
                    child: new Column(
                        children: [
                            new Container(
                                height: 200.0,
                                width: 200.0,
                                decoration: new BoxDecoration(
                                    image: DecorationImage(
                                        image: new AssetImage('assets/logo.png'),
                                        fit: BoxFit.fill
                                    ),
                                    shape: BoxShape.circle
                                ),
                            ),
                            new Container(
                                child: new Text('Welcome to Prime Message',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontFamily: 'Aleo',
                                        fontStyle: FontStyle.normal,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 25.0,
                                        color: Colors.white
                                    ),
                                ),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

回答2:

In the container can be only child. You have to use Column widget and add Container widgets as children if you want them position vertically.

 @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Container(
          color: Color(0xff258DED),
          height: 400.0,
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Container(
                height: 200.0,
                width: 200.0,
                decoration: new BoxDecoration(
                    image: DecorationImage(
                        image: new AssetImage('assets/logo.png'),
                        fit: BoxFit.fill
                    ),
                    shape: BoxShape.circle
                ),
              ),
              Container(
                child:Text('Welcome to Prime Message',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontFamily: 'Aleo',
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.bold,
                      fontSize: 25.0,
                      color: Colors.white
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

tip #1 You don't have to use 'new' word to create object. tip #2 Read about Column, Row and Stack on flutter.dev

回答3:

Please check below code:-

@override
  Widget build(BuildContext mContext) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Color(0xff258DED),
          height: 400.0,
          alignment: Alignment.center,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 200.0,
                width: 200.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/logo.png'),
                        fit: BoxFit.fill
                    ),
                    shape: BoxShape.circle
                ),
              ),
              Container(
                child: Text('Welcome to Prime Message',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontFamily: 'Aleo',
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.bold,
                      fontSize: 25.0,
                      color: Colors.white
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

来源：https://stackoverflow.com/questions/57553821/is-there-a-way-to-include-multiple-children-inside-a-container