CODEWITHSUNDEEP
flutterdart
mishalhaneef
mishalhaneef

Reputation: 852

How to align an asset image responsive at bottom center in flutter

here is the UI that I'm trying to build

enter image description here

but this is the output

enter image description here

I tried alignment also , but that also didn't working

but when setting a fixed height this is working fine

enter image description here

but I can't fill this using the fit parameter,

here is the code

Scaffold(
        backgroundColor: kDarkTheme,
        body: SafeArea(
          child: Column(
            children: [
              const SizedBox(height: 10),
              Row(
                  //code for top button
              ),
              const SizedBox(height: 150),
              Stack(
                children: [
                  Center(
                    child: CircleAvatar(
                      radius: radiusSize + 5,
                      backgroundColor: kDarkCounterColor,
                      child: CircleAvatar(
                        backgroundColor: kDarkTheme,
                        radius: radiusSize,
                      ),
                    ),
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 35),
                      child: Text(
                        '39',
                        style: GoogleFonts.italiana(
                            fontSize: 120, color: kDarkCounterColor),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 15),
              const Text(
                'Tap To Count',
                style: TextStyle(
                  fontFamily: 'Helvatica',
                  color: Color(0xff656158),
                ),
              ),
              Expanded(
                child: Align(
                  alignment: Alignment.bottomRight,
                    child: SvgPicture.asset(
                  kDarkThemeImage,
                )),
              )
            ],
          ),
        ))

this is the code then the first error appears again. how could I fix this?

Upvotes: 0

Views: 622

Answers (1)

George Rappel
George Rappel

Reputation: 7198

You are using the Expanded widget on a column that doesn't have a set size. Try adding MainAxisSize attribute to your column, like this:

Column(
    mainAxisSize: MainAxisSize.max,  // Add this like
    children: [
       ...

This will make your column fit the whole available size on the previous widget (a scaffold for the whole screen). Then the expanded widget will fill the remaining space not used by the other widgets inside the column.

Upvotes: 1

Related Questions