skip to Main Content

I was learning Flutter, and I am trying to create a simple app. This is my code so far;

import 'package:flutter/material.dart';

void main() => runApp(const CurrencyConverter());

class CurrencyConverter extends StatefulWidget {
  const CurrencyConverter({Key? key}) : super(key: key);

  @override
  _CurrencyConverterState createState() => _CurrencyConverterState();
}

class _CurrencyConverterState extends State<CurrencyConverter> {
  String inputText1 = '0';
  String inputText2 = '0';

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Currency Converter',
        theme: ThemeData(useMaterial3: true, primarySwatch: Colors.blue),
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Currency Converter',
                style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500)),
            centerTitle: true,
          ),
          body: Column(
            children: [
              //The Head
              ..._buildInputFields(),
              //The Body
              Expanded(
                child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    return Container(
                      color: Colors.green,
                      child: GridView.count(
                        physics: const NeverScrollableScrollPhysics(),
                        crossAxisCount: 3,
                        childAspectRatio:
                            constraints.maxWidth / constraints.maxHeight,
                        children: List.generate(12, (index) {
                          return Container(
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: Colors.white,
                                width: 1,
                              ),
                            ),
                            child: Center(
                              child: Text(
                                '${index + 1}',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 24),
                              ),
                            ),
                          );
                        }),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      );

  //Input fields
  List<Widget> _buildInputFields() => [
        _buildTextField(Icons.monetization_on, inputText1, 'Bitcoin',
            const Color.fromARGB(255, 246, 247, 248)),
        _buildTextField(Icons.monetization_on, inputText2,
            'United States Dollar', const Color(0xFFf8f9fb)),
      ];

  Widget _buildTextField(IconData icon, String text, String hint, Color color) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      color: Colors.blue, // background color
      child: Row(
        children: [
          IconButton(icon: Icon(icon), onPressed: () {}),
          Container(width: 16.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                AutoSizeText(
                  text,
                  style: const TextStyle(
                      fontSize: 35, fontWeight: FontWeight.bold),
                  maxLines: 1,
                ),
                Text(hint,
                    style: const TextStyle(
                        fontSize: 14.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.grey)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Here is the output;

Output Screenshot

The body is actually a 4×3 GridView and I want it all items to be shown like having a dynamic height to make it all fit regardless of the size of the screen;

  • 1 2 3
  • 4 5 6
  • 7 8 9
  • . 0 x

How can I do that?

2

Answers


  1. Consider using the GridView.builder as shown below

    GridView.builder(
        physics = const NeverScrollableScrollPhysics(),
        itemCount = 12,
        gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: constraints.maxWidth /
              constraints.maxHeight *
              1.3,
          crossAxisCount: 3,
        ),
        itemBuilder = (context, index) => Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.white,
              width: 1,
            ),
          ),
          child: Center(
            child: Text(
              '${index + 1}',
              style: const TextStyle(
                  color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      );
    
    Login or Signup to reply.
  2. There are many way to solve this problem but I just want to solve your problem based on your current code

    Solution:

    1. Remove Expanded and Wrap your column with SingleChildscrollView so that full screen will be scrollable and your UX flow looking good.

    2. Remove Layoutbuilder and add shrinkwrap =true so that it will take dynamic height as we already use SingleChildScrollView

    import 'package:flutter/material.dart';
    
    void main() => runApp(const CurrencyConverter());
    
    class CurrencyConverter extends StatefulWidget {
      const CurrencyConverter({Key? key}) : super(key: key);
    
      @override
      _CurrencyConverterState createState() => _CurrencyConverterState();
    }
    
    class _CurrencyConverterState extends State<CurrencyConverter> {
      String inputText1 = '0';
      String inputText2 = '0';
    
      @override
      Widget build(BuildContext context) => MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Currency Converter',
            theme: ThemeData(useMaterial3: true, primarySwatch: Colors.blue),
            home: Scaffold(
              appBar: AppBar(
                title: const Text('Currency Converter',
                    style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500)),
                centerTitle: true,
              ),
              body: SingleChildScrollView(
                child: Column(
                  children: [
                    //The Head
                    ..._buildInputFields(),
                    //The Body
                    Container(
                      color: Colors.green,
                      child: GridView.count(
                        shrinkWrap: true,
                        crossAxisCount: 3,
                        children: List.generate(12, (index) {
                          return Container(
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: Colors.white,
                                width: 1,
                              ),
                            ),
                            child: Center(
                              child: Text(
                                '${index + 1}',
                                style: TextStyle(color: Colors.white, fontSize: 24),
                              ),
                            ),
                          );
                        }),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
    
      //Input fields
      List<Widget> _buildInputFields() => [
            _buildTextField(Icons.monetization_on, inputText1, 'Bitcoin',
                const Color.fromARGB(255, 246, 247, 248)),
            _buildTextField(Icons.monetization_on, inputText2,
                'United States Dollar', const Color(0xFFf8f9fb)),
          ];
    
      Widget _buildTextField(IconData icon, String text, String hint, Color color) {
        return Container(
          padding: const EdgeInsets.all(16.0),
          color: Colors.blue, // background color
          child: Row(
            children: [
              IconButton(icon: Icon(icon), onPressed: () {}),
              Container(width: 16.0),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      text,
                      style: const TextStyle(
                          fontSize: 35, fontWeight: FontWeight.bold),
                      maxLines: 1,
                    ),
                    Text(hint,
                        style: const TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.grey)),
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }
    
    
    

    I hope this will solve your problem.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search