Flutter - cannot use Flexible inside Padding for text wrapping purpose

Question

In my flutter app, I want to have a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;

   @override
      Widget bui         


        

Answer 1

That my approach to what you need:

Padding(
      padding: const EdgeInsets.all(8.0),
      child: Material(
        elevation: 5.0,
        child: Container(
//            height: 220,
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              height: 25,
              color: Color(0xff6898F7),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Online Pharmacy',
                    style: TextStyle(
                      color: Color(0xffffffff),
                    ),
                  ),
                  Text(
                    'your hidden text lol',
                    style: TextStyle(
                      color: Color(0xffffffff),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 150.0,
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
//                              you could use icon instead of image
//                              Container(
//                                height: 80,
//                                child: Image.asset(
//                                  "images/medicine.jpg",
//                                  fit: BoxFit.fill,
//                                ),
//                              ),
                          Icon(
                            Icons.touch_app,
                            size: 40.0,
                          ),
                          SizedBox(height: 10.0),
                          Flexible(
                              child: Text(
                            'Browse Through Database',
                            textAlign: TextAlign.center,
                          ))
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
//                              you could use icon instead of image
//                              Container(
//                                height: 80,
//                                child: Image.asset(
//                                  "images/medicine.jpg",
//                                  fit: BoxFit.fill,
//                                ),
//                              ),
                          Icon(
                            Icons.input,
                            size: 40.0,
                          ),
                          SizedBox(height: 10.0),
                          Flexible(
                              child: Text(
                            'Type your own medicine',
                            textAlign: TextAlign.center,
                          ))
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
//                              you could use icon instead of image
//                              Container(
//                                height: 80,
//                                child: Image.asset(
//                                  "images/medicine.jpg",
//                                  fit: BoxFit.fill,
//                                ),
//                              ),
                          Icon(
                            Icons.image,
                            size: 40.0,
                          ),
                          SizedBox(height: 10.0),
                          Flexible(
                              child: Text(
                            'Picture of your prescription',
                            textAlign: TextAlign.center,
                          ))
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        )),
      ),
    )