How to use expanded in rich text flutter-CodePudding

Hi good evening everyone. I am trying to use expanded in my rich text but unable to achieve. My main problem is that widget get overflow on different screen size so I need a way of how to achieve expanded since expanded will help text to fit according to sizer of the screen

code :

  Container(
                width: double.maxFinite,
                height: 100,
                margin: const EdgeInsets.only(left: 150,top: 50),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Watch your playlist",
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: color.AppColor.homePageDetails
                      ),
                    ),
                    SizedBox(height: 10,),//56:39
                    RichText(
                      text: TextSpan(
                       text: "stream up\n",
                        style:TextStyle(
                          color: color.AppColor.homePagePlanColor,
                          fontSize: 16
                        ),
                        children: [
                          TextSpan(
                            text:"check out your favourite"
                          )
                        ]
                      ),
                    ),

                  ],
                ),
              )

CodePudding user response：

I have had the same problem a long time ago, one solution for this, is to use Flexible Widget inside a Row:

             Row(
                children: [
                  Flexible(
                    child: RichText(
                      text: const TextSpan(
                          text: "stream up\n",
                          color: color.AppColor.homePagePlanColor,
                          style: TextStyle(fontSize: 16),
                          children: [
                            TextSpan(text: "check out your favourite")
                          ]),
                    ),
                  ),
                ],
              ),

Make sure to use const to avoid performance issues as well.

CodePudding user response：

you can use this package = flutter_screenutil it proportions all the application content for different screen sizes

CodePudding user response：

The overflow issue is coming from Container's height. You can simply remove height from Container , It will work fine without any issue

     Container(
            width: double.maxFinite,
            margin: const EdgeInsets.only(left: 150, top: 50),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [

Note: left padding 150 taking 150px on left, and "stream up\n" => \n creating newline. default it will take as much size at it is needed