Flutter dynamic text grid - flutter

Question

Does anyone know how to create a grid like this using GridView.builder. Any other alternative will be much appreciated too.
The text in the container should be dynamic as well based on the size of the text.
Thank you
Tried using gridView but the container was always of fixed width and height. The row items was not dynamic as well

Answer 1

You can achieve it by wrapping your list with a Wrap widget. Check the example below:
import 'package:flutter/material.dart';
class NewPage extends StatelessWidget {
const NewPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
List<String> countries = [
'Canada',
'Germany',
'India',
'Taiwan, Province of China',
'United States',
'United Kingdom',
'Kingdom of Saudi Arabia',
'Bangladesh',
'Vietnam',
'Peru',
'Italy'
];
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
const Text('List of countries',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24)),
const SizedBox(height: 20),
Wrap(
alignment: WrapAlignment.start,
spacing: 10.0,
runSpacing: 10.0,
children: List.generate(
countries.length,
(index) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey[400]!),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
child: Text(
countries[index],
style: const TextStyle(fontSize: 16),
),
),
)),
)
],
),
),
);
}
}

Answer 2

Please have a look at Wrap. I recommend that you watch the video first provided on link then read the documentation/example.