Как автоматически изменить размер текста внутри строки во флаттере - PullRequest
Новая
       6

Как автоматически изменить размер текста внутри строки во флаттере

1 голос
/ 19 мая 2019

Я пытаюсь повторить приведенный ниже интерфейс.Я хочу показать список элементов, где каждый элемент равномерно распределен на 3 раздела (см. Изображение ниже).Я хочу добиться такой же отзывчивости.Но я не могу привести их в идеальный порядок.Вот макет:

enter image description here

Вот чего я добился:

enter image description here

Вот мой код: 

Card stockList() {
    return Card(
      child: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Stocks & Values', style: Theme.of(context).textTheme.subtitle,),
            SizedBox(height: 10.0),
            tile1(),
            SizedBox(height: 10.0,),
            Divider(),
            SizedBox(height: 10.0,),
            tile2(),
            SizedBox(height: 10.0,),
            Divider(),
            tile3(),
            SizedBox(height: 10.0,),
            Divider(),
            tile4(),
          ],
        ),
      ),
    );
  }

  Container tile1() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile2() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('22k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
//              SizedBox(height: 2.0,),
//              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
//              SizedBox(height: 2.0,),
//              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('788.27', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 30,125.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile3() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile4() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

Где я делаю ошибку?Любая идея о том, как сделать этот макет отзывчивым, чтобы они оставались выровненными, как показано в макете.

1 Ответ

0 голосов
/ 19 мая 2019

Чтобы группа детей занимала одинаковое пространство между собой, оберните их в Expanded: 

Container tile1() {
  return Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          // Your column
        ),
        Expanded(
          // Your column
        ),
        Expanded(
          // Your column
        )
      ],
    ),
  );
}
...