How to auto-scale the size of the tiles in my flutter game

Question

I encounter some problem regarding with scaling the tiles of my game.

This game is something related to 4 pics one word. Therefore, as we know, there is a level in a game that the count of letters in a word it will reach a greater than 5.

For example.

As you can see we have a 5 tiles because the numbers of letter in Guess is 5. But if the number of letter is greater than 5. then the TILES must be auto-scale down.

Answer 1

Make word fontSize, letter width and Height , proportional to word length

import 'package:flutter/material.dart';

class FacebookLogin extends StatefulWidget {
  @override
  _FacebookLoginState createState() => _FacebookLoginState();
}

class _FacebookLoginState extends State<FacebookLogin> {
  List<String> tiles = ["LO", "LUCKY", "MOTHERHOOD"];

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    double availableWidth = screenWidth * 0.95;
    return Scaffold(
      appBar: AppBar(
        title: Text("Amzath Yehouessi"),
      ),
      body: ListView.builder(
        itemCount: tiles.length,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          String currentTile = tiles[index];
          return Container(
            width: availableWidth,
            height: 200,
            child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: currentTile.length,
                itemBuilder: (context, currentIndex) {
                  return UnconstrainedBox(
                    child: Container(
                      height: availableWidth * 0.7 / currentTile.length,
                      width: availableWidth * 0.7 / currentTile.length,
                      padding: EdgeInsets.all(5),
                      margin: EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        color: Colors.black,
                      ),
                      child: Center(
                        child: Text(
                          currentTile[currentIndex],
                          style: TextStyle(
                              color: Colors.white,
                              fontSize:
                                  availableWidth * 0.4 / currentTile.length),
                        ),
                      ),
                    ),
                  );
                }),
          );
        },
      ),
    );
  }
}