how can i make a widget retain its position when another widget expands?

Question

I have an image and text in a container. How do I write my code so the image will still retain its position in the middle of the container when the text expands and have two lines instead of one line. Here is my code and an image for context. I want the text to be able to grow upwards when it becomes two lines, just like it is in the image i uploaded. But i want the circle svg to retain its position even if the text expands to two lines.

class CategoryCardWithSvg extends StatelessWidget {
  final String svgimage;
  final String title;
  final Function press;
  const CategoryCardWithSvg({
    Key key,
    this.svgimage,
    this.title,
    this.press,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
            color: Theme.of(context).shadowColor,
            width: 0.5
        ),
        boxShadow: [
          BoxShadow(
            offset: Offset(0.0, 10.0),
            blurRadius: 2.0,
            spreadRadius: 0.0,
            color: Theme.of(context).shadowColor,
          ),
        ],
      ),
      child: InkWell(
        onTap: press,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 0, 10, 20),
          child: Column(
            children: <Widget>[
              Spacer(),
              SvgPicture.asset(
                svgimage,
                height: 60,
              ),
              Spacer(),
              Text(
                title,
                textAlign: TextAlign.center,
                style: Theme.of(context).textTheme.headline6.copyWith(
                    fontSize: 15,
                    height: 1,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Cairo'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

you can use Expanded() widget to take same amount of space and distribute them equally between two widgets.

class CategoryCardWithSvg extends StatelessWidget {
  final String svgimage;
  final String title;
  final Function press;
  const CategoryCardWithSvg({
    Key key,
    this.svgimage,
    this.title,
    this.press,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
            color: Theme.of(context).shadowColor,
            width: 0.5
        ),
        boxShadow: [
          BoxShadow(
            offset: Offset(0.0, 10.0),
            blurRadius: 2.0,
            spreadRadius: 0.0,
            color: Theme.of(context).shadowColor,
          ),
        ],
      ),
      child: InkWell(
        onTap: press,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 0, 10, 20),
          child: Column(
            children: <Widget>[
              Expanded(child:
              SvgPicture.asset(
                svgimage,
                height: 60,
              ),),
Expanded(child:
              Center(child:
              Text(
                title,
                textAlign: TextAlign.center,
                style: Theme.of(context).textTheme.headline6.copyWith(
                    fontSize: 15,
                    height: 1,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Cairo'),
              )))
            ],
          ),
        ),
      ),
    );
  }
}