Flutter - 오버플로우시 텍스트 랩, 점점 줄이기 또는 서서히 사라지게하기, Flutter - Wrap text on overflow, like insert ellipsis or fade

질문

중앙 텍스트가 최대 크기를 가지고 있고, 텍스트 내용이 너무 크면 크기가 맞도록 하는 라인을 만들려고합니다.

TextOverflow.ellipsis 속성을 삽입하여 텍스트를 줄이고 세 개의 점 ...을 삽입했지만 작동하지 않습니다.

main.dart

import 'package:flutter/material.dart';  void main() { runApp(new MyApp()); }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new MaterialApp(       home: new HomePage(),     );   } }  class HomePage extends StatelessWidget {   @override   Widget build(BuildContext context) => new Scaffold(     appBar: new AppBar(       backgroundColor: new Color(0xFF26C6DA),     ),     body: new ListView  (       children: <Widget>[         new Card(           child: new Container(             padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),             child: new Row(               children: <Widget>[                 new Container(                   padding: new EdgeInsets.only(right: 24.0),                   child: new CircleAvatar(                     backgroundColor: new Color(0xFFF5F5F5),                     radius: 16.0,                   )                 ),                 new Container(                   padding: new EdgeInsets.only(right: 13.0),                   child: new Text(                     'Text lar...',                     overflow: TextOverflow.ellipsis,                     style: new TextStyle(                       fontSize: 13.0,                       fontFamily: 'Roboto',                       color: new Color(0xFF212121),                       fontWeight: FontWeight.bold,                     ),                   ),                 ),                 new Container(                   child: new Column(                     crossAxisAlignment: CrossAxisAlignment.end,                     children: <Widget>[                       new Row(                         children: <Widget>[                           new Text(                             'Bill  ',                             style: new TextStyle(                               fontSize: 12.0,                               fontFamily: 'Roboto',                               color: new Color(0xFF9E9E9E)                             ),                           ),                           new Text(                             '\$ -999.999.999,95',                             style: new TextStyle(                               fontSize: 14.0,                               fontFamily: 'Roboto',                               color: new Color(0xFF212121)                             ),                           ),                         ],                       ),                       new Row(                         children: <Widget>[                           new Text(                             'Limit  ',                             style: new TextStyle(                               fontSize: 12.0,                               fontFamily: 'Roboto',                               color: new Color(0xFF9E9E9E)                             ),                           ),                           new Text(                             'R\$ 900.000.000,95',                             style: new TextStyle(                               fontSize: 14.0,                               fontFamily: 'Roboto',                               color: new Color(0xFF9E9E9E)                             ),                           ),                         ],                       ),                     ]                   )                 )               ],             ),           )         ),       ]     )   ); } 

result:

expected:

답변

Container을 Flexible으로 감싸면 Row가 Container가 기본 너비보다 좁아도 괜찮다는 것을 알 수 있습니다. Expanded도 작동합니다.

Flexible(   child: new Container(     padding: new EdgeInsets.only(right: 13.0),     child: new Text(       'Text largeeeeeeeeeeeeeeeeeeeeeee',       overflow: TextOverflow.ellipsis,       style: new TextStyle(         fontSize: 13.0,         fontFamily: 'Roboto',         color: new Color(0xFF212121),         fontWeight: FontWeight.bold,       ),     ),   ), ),