CODEWITHSUNDEEP
flutterdartflutter-layout
Ranto Berk
Ranto Berk

Reputation: 381

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".

Upvotes: 23

Views: 86456

Answers (4)

M Imam Pratama
M Imam Pratama

Reputation: 1279

Container is a Single-child layout widget. But it can have multiple children by using a Multi-child layout widget as its child.

Upvotes: 5

Dhaval Patel
Dhaval Patel

Reputation: 409

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
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Upvotes: 1

Krzysztof Wizner
Krzysztof Wizner

Reputation: 51

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

Upvotes: 3

Adlan Arif Zakaria
Adlan Arif Zakaria

Reputation: 1745

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
                                    ),
                                ),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

Upvotes: 34

Related Questions