flutterdart

How to Add Multiple Containers in a Horizontal ListView in Flutter?


I'm trying to create a horizontally scrollable grid of containers in Flutter using GridView, but I'm only able to display one item. I want to show multiple items (containers) side by side in a scrollable horizontal grid. Here's the code I tried:

  Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                //color: Colors.blue,
                child: IconButton(
                  // Use the EvaIcons class for the IconData
                  icon: weatherIcon, onPressed: () {},
                ),
              ),
              Text(
                sTemprature + " \u2103",
                textAlign: TextAlign.left,
                style: TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 14.sp,
                  color: AppTheme.grey,
                ),
              ),
            ],
          )
        ],

      ),
      children: [

        Padding(
          padding: EdgeInsets.only(top: 0.0, left: 10.w, right: 10.w),
          child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              color: Colors.white,
              elevation: 10,
              child:
              Row(
                children: [
                  Padding(padding: EdgeInsets.only(
                      top: 5.h, left: 10.w, right: 0.w),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                              width: 70.w,
                              height: 70.h,
                              //color: Colors.red,
                              child: weatherIconInside
                          ),
                          Text(
                            '$weatherDesc',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 14.sp,
                              letterSpacing: 0.2,
                              color: AppTheme.grey,
                            ),
                          ),
                        ],
                      )
                  ),
                  Padding(padding: EdgeInsets.only(
                      top: 5.h, left: 20.w, right: 0.w),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Min',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: 16.sp,
                              letterSpacing: 0.2,
                              color: AppTheme.grey,
                            ),
                          ),
                          Text(
                            '18 ' + '\u2103',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 24.sp,
                              letterSpacing: 0.2,
                              color: AppTheme.grey,
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                    color: Colors.black, width: 10.0),
                              ),
                            ),
                          ),
                          Text(
                            'Max',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: 16.sp,
                              letterSpacing: 0.2,
                              color: AppTheme.grey,
                            ),
                          ),
                          Text(
                            '28 ' + '\u2103',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 24.sp,
                              letterSpacing: 0.2,
                              color: AppTheme.grey,
                            ),
                          ),
                          SizedBox(height: 10.h,)
                        ],
                      )
                  ),
                ],
              )
          ),
        )
      ],
    ),
  );
}

Solution

  • Try wrapping your each Column widget with Flexible Widget.