Flutter container design

Question

im migrationg from ionic to flutter i have a premade app that contains the programming already done but i want to change the design for it, i have screenshots attached to see if anybody can help me i want to go from this: [1]: https://i.stack.imgur.com/Iax9V.png

to this:

https://i.stack.imgur.com/jcOLP.png

im new to flutter and since im coming from designing in html im looking for the right direction to go, or if somebody can explain to me how to achieve this

here is my container code:

 import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:ondemandservice/ui/theme.dart'; import '../../strings.dart'; Widget button157(String text, Color color, String icon, Function _callback, double width, double height){ return Stack( children: <Widget>[ Container( width: 128, height: 128, margin: EdgeInsets.only(top: 10), child: Stack( children: <Widget>[ Container( decoration: BoxDecoration( color: color, borderRadius:(null), ), padding: EdgeInsets.only(right: 10, left: 10), // child: Row( // children: [ // Expanded(child: Text(text, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w800, color: Colors.white), textAlign: TextAlign.left,), // ), // // Expanded(child: Container( // margin: EdgeInsets.only(left: 5, right: 5), // )), // ], // ) ), ]) ), Positioned.fill( child: Container( width: double.maxFinite, margin: EdgeInsets.only(left: 10, right: 10, bottom: 10), // alignment: strings.direction == TextDirection.ltr? Alignment.centerRight: Alignment.centerLeft, child: Stack( children: [ Container( child: icon.isNotEmpty? CachedNetworkImage( imageUrl: icon, imageBuilder: (context, imageProvider) => Container( width: double.maxFinite, alignment: strings.direction == TextDirection.ltr? Alignment.bottomCenter: Alignment.bottomCenter, // alignment: Alignment.bottomRight, child: Container( width: 100, height: 100, decoration: BoxDecoration( image: DecorationImage( image: imageProvider, fit: BoxFit.contain, alignment: Alignment.topCenter, )), ), ) ): Container(), // Image.asset(icon, // fit: BoxFit.contain, // ) ), Container( clipBehavior: Clip.none, margin: strings.direction == TextDirection.ltr? EdgeInsets.only(right: width*0.4, bottom: 5): EdgeInsets.only(left: width*0.4, bottom: 5 ), alignment: strings.direction == TextDirection.ltr? Alignment.bottomCenter: Alignment.bottomCenter, child: Text(text, maxLines: 1, textAlign: strings.direction == TextDirection.ltr? TextAlign.left: TextAlign.right,), ) ], ) )), Positioned.fill( child: Material( color: Colors.transparent, clipBehavior: Clip.hardEdge, shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(theme.radius) ), child: InkWell( splashColor: Colors.black.withOpacity(0.2), onTap: (){ _callback(); }, // needed )), ) ], ); }

Answer 1

I think you should check out the official docs for the GridView.builder class, where maybe you can achieve your current UI design, since with GridView, you can achieve these, let's say it like this, 3 containers/widgets in a row etc, and the idea is similar to the HTMLs grid. The link for the documentation: GridView