Which widgets should be used for responsive UI of the following wireframe?

Viewed 53

What widgets should be used to display 3 cartoons at the bottom of this picture and the text at the center responsively for different screen sizes?

enter image description here

2 Answers

There are many ways to do this. It will also depend on what responsive behavior you are looking for. I hope, I understood your specific requirements.

Here is a solution:

enter image description here

class Page extends StatelessWidget {
  const Page({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: Stack(children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: .4,
                child: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text(
                    'Headline text',
                    style: GoogleFonts.chewy(
                      textStyle: const TextStyle(
                        color: Colors.white,
                        letterSpacing: .5,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Container(
              alignment: const Alignment(0, .75),
              child: FractionallySizedBox(
                widthFactor: .8,
                heightFactor: .3,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.asset("assets/images/img1.png"),
                    Image.asset("assets/images/img2.png"),
                    Image.asset("assets/images/img3.png"),
                  ],
                ),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

In this solution,

  1. I use a main Container that will have your image as background.
  2. I then use a Stack to position the headline and the images.
  3. The headline is Centered and defined as a FittedBox inside a FractionallySizedBox. This allows me to have responsivity for the headline too.
  4. Finally, for the list of images, I used a FractionallySizedBox to size the list and an aligned Container to position it within the stack. The images are then spread thanks to the use of MainAxisAlignment.spaceBetween.

So, as you see, I used the following widgets to responsively size and position my Widgets:

  • Position
    • Center
    • Container with the alignment property
  • Size
    • FractionallySizedBox
Related