Флаттер - переполнение текстового поля по пользовательской высоте

#flutter #flutter-widget

Вопрос:

В моем текстовом представлении значение динамически поступает с сервера несколько раз, когда оно содержит одну строку, когда текст большой, оно занимает две строки и заполняет представление, как на прикрепленной картинке.

код:

   class ShopsCard extends StatelessWidget {
  final UniqueShop uniqueShop;

  ShopsCard({this.uniqueShop});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) =>
                  SearchScreen(
                    searchArguments: SearchArguments(
                        searchType: "campaign_shop_click",
                        campaignShopSlug: uniqueShop.sellerShopSlug,
                        searchDisplayName: uniqueShop.sellerShopBuisnessName),
                  )),
        );
      },
      child: Container(
        height: 144,
        width: 104,
        margin: EdgeInsets.only(right: 8.0),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(10)),
        padding: EdgeInsets.only(left: 15.0, right: 15.0, top: 10, bottom: 15.0),
        child: Column(
          children: [
            Container(
                height: 95.0,
                width: 104,
                child: uniqueShop.sellerShopImage != null
                    ? populateNetworkImage(imgUrl: uniqueShop.sellerShopImage)
                    : Icon(
                        Icons.image,
                        size: 50,
                      )),
            if (uniqueShop.sellerShopBuisnessName != null)
              Text(
                uniqueShop.sellerShopBuisnessName,
                maxLines: 2,
                textAlign: TextAlign.center,
                style: commonDmSansTextStyle(
                    fontSize: 12, fontWeight: FontWeight.w500, color: darkColor),
              )
          ],
        ),
      ),
    );
  }
}

Может ли кто-нибудь сказать мне, в чем проблема в моем коде и как я могу ее решить!

1. сработал ли для вас мой ответ?

2. Я решил это по-другому, здесь дочерние виджеты превышают высоту родительского контейнера, поэтому я получил эту ошибку. Я решил это, чтобы уменьшить заполнение дна, насколько сильно произошло сгибание рендеринга. Спасибо, брат, за твой ответ.

Ответ №1:

Оберните свой текст с Expanded помощью виджета или вы можете использовать overflow: TextOverflow.ellipsis,

  Expanded(
                child: Text(
                  uniqueShop.sellerShopBuisnessName,
                  maxLines: 2,
                  textAlign: TextAlign.center,
                  style: commonDmSansTextStyle(
                      fontSize: 12, fontWeight: FontWeight.w500, color: darkColor),
                ),
              )

Ответ №2:

Вы можете установить максимальный номер строки равным единице и показывать многоточие, если текст переполняется

Вот как :

 Text(
  // ...
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);