skip to Main Content

I want to "dock" the Text Widget you can see on the Picture on the GridView. My approach looks like this:

docked

Container(
            height: 500,
            child: Column(
              children: [
                Expanded(
                  child: GridView.count(
                    physics: NeverScrollableScrollPhysics(),
                    crossAxisCount: 7,
                    childAspectRatio: 0.6,
                    children: List.generate(dates.length, (index) {
                      final date = firstMonth.add(Duration(days: index));
                      return InkWell(
                        onTap: () {
                          //print(DateTime(date.year, date.month, date.day));
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            border: Border.all(
                                color: date.day == DateTime.now().day && date.month == DateTime.now().month && date.year == DateTime.now().year ? Colors.red : Colors.grey[700]!),
                          ),
                          child: dates[index],
                        ),
                      );
                    }),
                  ),
                ),
                Text("Information"),
                Text("more Information"),

              ],
            ),
          )

The problem it’s when we look at February it’s not docked, its floating in the void now:
enter image description here

Either I cut the Calendar or it’s floating in the no man’s land. Is there a way to dock it to the GridView?
I already tried to use just an expanded but then the GridView takes way too much space, more than it actually needs, so the Text Widget is at the bottom…
Can someone help me?

2

Answers


  1. Chosen as BEST ANSWER

    The Stack with docked seems to work also but I found another solution without adding a Stack:

          Column(
            children: [
              GridView.count(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                crossAxisCount: 7,
                childAspectRatio: 0.6,
                children: List.generate(dates.length, (index) {
                  final date = firstMonth.add(Duration(days: index));
                  return InkWell(
                    onTap: () {
                      //print(DateTime(date.year, date.month, date.day));
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: date.day == DateTime.now().day && date.month == DateTime.now().month && date.year == DateTime.now().year
                                ? Colors.red
                                : Colors.grey[700]!),
                      ),
                      child: dates[index],
                    ),
                  );
                }),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(height: 20,),
                  Text("more Information"),
                  Text("more Information"),
                ],
              ),
            ],
          ),
    

    Here it's also docked


  2. Try using stack widget it is created for "dock" some widget over the other

    https://api.flutter.dev/flutter/widgets/Stack-class.html

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