Question 201990 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make an overflowing GridView.count adaptive without resorting to hard code?

As a beginner, I faced the problem of the adaptability of my code. I have overflowed GridView, as I understand it in the daysBuilder() method.This is my crowded GridView
I don’t want to hardcode (with the help of fitting via childAspectRatio) and make it adaptive for all devices, please tell me how it can be done. This is what it should look like.

import 'dart:developer';

import 'package:calendar/themes/colors.dart';
import 'package:calendar/themes/project_icons_icons.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 70,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              '2023',
              style: TextStyle(
                color: ProjectColors.white,
                fontSize: 17,
                fontFamily: 'FiraSans',
                fontWeight: FontWeight.w500,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  onPressed: () {
                    log('Day Calendar');
                  },
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  padding: const EdgeInsets.only(left: 16),
                  icon: const Icon(ProjectIcons.calandar_day),
                ),
                IconButton(
                  onPressed: () {
                    log('Week Calendar');
                  },
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  padding: const EdgeInsets.only(left: 16),
                  icon: const Icon(ProjectIcons.calandar_week),
                ),
                IconButton(
                  onPressed: () {
                    log('Month Calendar');
                  },
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  padding: const EdgeInsets.only(left: 16),
                  icon: const Icon(ProjectIcons.calandar_month),
                ),
                IconButton(
                  onPressed: () {
                    log('Year Calendar');
                  },
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  padding: const EdgeInsets.only(left: 16),
                  icon: const Icon(ProjectIcons.calandar_year),
                ),
              ],
            ),
          ],
        ),
        backgroundColor: ProjectColors.dark,
        shadowColor: Colors.transparent,
      ),
      backgroundColor: ProjectColors.dark,
      body: Padding(
        padding: const EdgeInsets.only(left: 12, right: 12),
        child: GridView.count(
          crossAxisCount: 3,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          childAspectRatio: 0.7,
          physics: const NeverScrollableScrollPhysics(),
          children: Calendar(year: 2023).yearBuilder(),
        ),
      ),
    );
  }
}

class Calendar {
  int year;

  Calendar({required this.year});

  static const Map<int, String> monthInYear = {
    1: 'January',
    2: 'February',
    3: 'March',
    4: 'April',
    5: 'May',
    6: 'June',
    7: 'July',
    8: 'August',
    9: 'September',
    10: 'October',
    11: 'November',
    12: 'December',
  };

  List<Widget> yearBuilder() {
    final List<Widget> months = [];
    for (var i = 1; i < monthInYear.length + 1; i++) {
      months.add(monthBuilder(i));
    }
    return months;
  }

  Widget monthBuilder(int month) {
    return GestureDetector(
      onTap: () {
        log('Tap: ${monthInYear[month]}');
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 3, bottom: 8),
            child: Text(
              '${monthInYear[month]}',
              style: const TextStyle(
                color: ProjectColors.white,
                fontSize: 15,
                fontFamily: 'FiraSans',
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(
            height: 125,
            child: GridView.count(
              physics: const NeverScrollableScrollPhysics(),
              crossAxisCount: 7,
              mainAxisSpacing: 8,
              children: daysBuilder(year, month),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> daysBuilder(int year, int month) {
    final List<Widget> numsList = [];
    int daysInMonth = DateTime(year, month + 1, 0).day;
    for (var i = 1; i < daysInMonth + 1; i++) {
      numsList.add(
        Column(
          children: [
            Text(
              '$i',
              style: const TextStyle(
                color: ProjectColors.white,
                fontSize: 12,
                fontFamily: 'FiraSans',
                fontWeight: FontWeight.w400,
              ),
              textAlign: TextAlign.center,
            ),
            const Icon(
              Icons.pentagon,
              size: 4,
              color: ProjectColors.secondaryBlue,
            ),
          ],
        ),
      );
    }
    return numsList;
  }
}

GridView does not obey the height of the sizedbox and the childAspectRatio method does not suit me either

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved the problem, wrapped the Icon() in Expanded().

      List<Widget> daysBuilder(int year, int month) {
    final List<Widget> numsList = [];
    int daysInMonth = DateTime(year, month + 1, 0).day;
    for (var i = 1; i < daysInMonth + 1; i++) {
      numsList.add(
        Column(
          children: [
            Text(
              '$i',
              style: const TextStyle(
                color: ProjectColors.white,
                fontSize: 12,
                fontFamily: 'FiraSans',
                fontWeight: FontWeight.w400,
              ),
              textAlign: TextAlign.center,
            ),
            const Expanded(
              child: Icon(
                Icons.pentagon,
                size: 4,
                color: ProjectColors.secondaryBlue,
              ),
            ),
          ],
        ),
      );
    }
    return numsList;
  }
}

  2. 0

    You can either use wrap instead of GridView.count in monthsBuilder function.
    Code:

    Widget monthBuilder(int month) {
    return GestureDetector(
      onTap: () {
        log('Tap: ${monthInYear[month]}');
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 3, bottom: 8, top: 10),
            child: Text(
              '${monthInYear[month]}',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 15,
                fontFamily: 'FiraSans',
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(
            height: 125,
            child: Wrap(

              spacing: 5,
              runSpacing: 5,
              children: daysBuilder(year, month),
            ),

            // GridView.count(
            //   physics: const NeverScrollableScrollPhysics(),
            //   crossAxisCount: 7,
            //   mainAxisSpacing: 8,
            //   children: daysBuilder(year, month),
            // ),
          ),
        ],
      ),
    );
  }

    Or, you can use a flexible widget with a fitted box on text on daysBuilder function.

    Code:

    List<Widget> daysBuilder(int year, int month) {
    final List<Widget> numsList = [];
    int daysInMonth = DateTime(year, month + 1, 0).day;
    for (var i = 1; i < daysInMonth + 1; i++) {
      numsList.add(
        Column(
          children: [
            Flexible(
              flex: 4,
              child: FittedBox(
                child: Text(
                  '$i',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    fontFamily: 'FiraSans',
                    fontWeight: FontWeight.w400,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Flexible(
              flex: 1,
              child: const Icon(
                Icons.pentagon,
                size: 4,
                color: Colors.blueAccent,
              ),
            ),
          ],
        ),
      );
    }
    return numsList;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search