How to create multiple children from an expansion tile class in Flutter-CodePudding

i created an expansion tile card that I can call at any time. I have created the expansion tile as a class on its on so I can call it anytime and use it on multiple pages without having to repeat the code for each new page.

this is the code below

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class ExpandedTileCard extends StatelessWidget {
  final String toptitle;
  final String bottomnumber;
  const ExpandedTileCard({
    Key key,
    this.toptitle,
    this.bottomnumber,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical:5.0),
      child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
      new Container(
      padding: EdgeInsets.only(left: 0.0,bottom: 20.0),
      decoration: new BoxDecoration(
          border: new Border(
              bottom: new BorderSide(
                  color: Colors.black
              )
          )
      ),
      child: new Row(
        children: [
          new Expanded(
            flex:1,
            child: new SvgPicture.asset(
              'assets/icons/phone-call.svg',
              height: 30,
            ),
          ),
          new Expanded(
            flex:9,
            child: new Container(
              padding: EdgeInsets.only(left: 15.0),
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ExpansionTile(
                    title: Text(
                      toptitle,
                      style: new TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                      textAlign: TextAlign.left,
                    ),
                    children: [],
                  ),
                  new Text(
                      (bottomnumber)
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    ),
          ],
    ),
    );
  }
}

and then i call the expansion tile in my pages like this.

ExpandedTileCard(
                      toptitle: "recharge",
                      bottomnumber: "*129939201#",
                    ),

my question is. How do i add the children widget to the expansion tile class and call it in my pages anytime i want. The same way i can edit the toptitle and bottom number. i dont want to create a fixed children widget because some expansion tiles will have different number of children than others. please help.

CodePudding user response：

you can do this

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class ExpandedTileCard extends StatelessWidget {
final String toptitle;
final String bottomnumber;
final List<Widget> children;
const ExpandedTileCard({
Key key,
this.toptitle,
this.children,
this.bottomnumber,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
  padding: EdgeInsets.symmetric(vertical:5.0),
  child: new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
  new Container(
  padding: EdgeInsets.only(left: 0.0,bottom: 20.0),
  decoration: new BoxDecoration(
      border: new Border(
          bottom: new BorderSide(
              color: Colors.black
          )
      )
  ),
  child: new Row(
    children: [
      new Expanded(
        flex:1,
        child: new SvgPicture.asset(
          'assets/icons/phone-call.svg',
          height: 30,
        ),
      ),
      new Expanded(
        flex:9,
        child: new Container(
          padding: EdgeInsets.only(left: 15.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ExpansionTile(
                title: Text(
                  toptitle,
                  style: new TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                  textAlign: TextAlign.left,
                ),
                children: children,
              ),
              new Text(
                  (bottomnumber)
              ),
            ],
          ),
        ),
      )
    ],
  ),
),
      ],
),
);
}
}

and use it like this

ExpandedTileCard(
                  toptitle: "recharge",
                  children: [
                  Container(),
                  SizedBox(),
                  ],
                  bottomnumber: "*129939201#",
                ),

CodePudding user response：

do something like this,

class ExpandedTileCard extends StatelessWidget {
  final String toptitle;
  final String bottomnumber;
  final Widget child; // or final List<Widget> children
const ExpandedTileCard({
    Key key,
    this.toptitle,
    this.bottomnumber,
    this.child,
  }) : super(key: key);
}
...
children: [child] // or children: children

now when you pass the children pass it as single widget or pass it as list