skip to Main Content

I’m working on a Flutter project and trying to create an expandable tip box similar to the one shown in the reference image below:

enter image description here

However, my current implementation is facing overflow issues, and the icon is not aligned properly, as shown in this result image:

enter image description here

Here’s the relevant code:

Container(
              padding: const EdgeInsets.all(10),
              decoration: ShapeDecoration(
                color: Colors.black.withOpacity(0.03999999910593033),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4)),
              ),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                              width: 280,
                              child: Text(
                                  'Download one of the files below. Open the file in Excel or a similar app, add user info, save, and upload.n',
                                  style: TextStyle(
                                    color: Colors.black,
                                  )),
                            ),
                            SizedBox(width: 5),
                            Icon(Icons.keyboard_arrow_down)
                          ],
                        ),
                        Text("Avoid common errors"),
                        BulletedText(
                            "You can upload up to 249 users per CSV file."),
                        BulletedText(
                            "Each user must have a unique username email address."),
                        BulletedText(
                            "Save as a CSV (comma delimited) file with 10 columns.​"),
                      ],
                    ),
                  ),
                  SizedBox(width: 10),
                  SizedBox(
                    width: 24,
                    height: 24,
                    child: Stack(children: []),
                  ),
                ],
              ),
            )

Could you provide guidance on how to resolve the overflow issues and properly align the icon within the tip box? I want to achieve a layout similar to the reference image. Thank you!

2

Answers


  1. Wrap the first child of the Row widget with Flexible. Here is the code snippet.

    Expanded(
             child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    crossAxisAlignment: 
                               CrossAxisAlignment.start,
                                    children: [
                                      Flexible(
                                        child: SizedBox(
                                          width: 280,
                                          child: Text(
                                              'Download one of the files below. Open the file in Excel or a similar app, add user info, save, and upload.n',
                                              style: TextStyle(
                                                color: Colors.black,
                                              )),
                                        ),
                                      ),
                                      SizedBox(width: 5),
                                      Icon(Icons.keyboard_arrow_down)
                                    ],
                                  ),
                                  Text("Avoid common errors"),
                                  Text(
                                      "You can upload up to 249 users per CSV file."),
                                  Text(
                                      "Each user must have a unique username email address."),
                                  Text(
                                      "Save as a CSV (comma delimited) file with 10 columns.​"),
                                ],
                              ),
                            ),
    

    Please mark this as accepted if it helped you. Cheers. You can even scrap the SizedBox with width as 280 and let the Text take the width as per the screen width.

    Login or Signup to reply.
  2. Container(
              padding: const EdgeInsets.all(10),
              decoration: ShapeDecoration(
                color: Colors.black.withOpacity(0.03999999910593033),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4)),
              ),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              child: Text(
                                  'Download one of the files below. Open the file in Excel or a similar app, add user info, save, and upload.n',
                                  style: TextStyle(
                                    color: Colors.black,
                                  )),
                            ),
                            SizedBox(width: 5),
                            Icon(Icons.keyboard_arrow_down)
                          ],
                        ),
                        Text("Avoid common errors"),
                        Text(
                            "You can upload up to 249 users per CSV file."),
                        Text(
                            "Each user must have a unique username email address."),
                        Text(
                            "Save as a CSV (comma delimited) file with 10 columns.​"),
                      ],
                    ),
                  ),
                  SizedBox(width: 10),
                  SizedBox(
                    width: 24,
                    height: 24,
                    child: Stack(children: []),
                  ),
                ],
              ),
            );
    

    Hope this solution works for you

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