Как сделать так, чтобы текстовый элемент занимал половину высоты родительского контейнера в flutter?

#flutter #dart

Вопрос:

У меня есть следующий код:

 containers.add(Container(  decoration: BoxDecoration(  borderRadius: BorderRadius.circular(10),  color: Colors.blue,  ),  margin: const EdgeInsets.all(10),  width: MediaQuery.of(context).size.width/2-20,  height: MediaQuery.of(context).size.width/2-20,  child: Column(  children: [  Text(  value2,  style: TextStyle(  inherit: false,  color: Colors.white,  fontSize: MediaQuery.of(context).size.width/2,  fontWeight: FontWeight.bold,  )  ),  ]  )  ));  });  }  });  

Сам контейнер переходит в список, который передается в представление сетки, в конечном итоге превращаясь в сетку шириной 2 по экрану. Я хочу сделать так, чтобы высота текста составляла половину высоты контейнера, определяемой шириной и высотой MediaQuery.of(context).size.width/2-20 . Возможно ли это? Спасибо

Ответ №1:

Вы можете использовать Expanded вместе с FittedBox :

 class HalfHeightText extends StatelessWidget {  final String label;    const HalfHeightText({required this.label});    Widget build(BuildContext context) {  return Container(  decoration: BoxDecoration(  borderRadius: BorderRadius.circular(10),  color: Colors.blue,  ),  margin: const EdgeInsets.all(10),  width: MediaQuery.of(context).size.width / 2 - 20,  height: MediaQuery.of(context).size.width / 2 - 20,  child: Column(  children: [  // ===========================================  Expanded(  child: FittedBox(  fit: BoxFit.contain,  child: Text(  label,  style: const TextStyle(  inherit: false,  color: Colors.white,  fontWeight: FontWeight.bold,  ),  ),  ),  ),  const Expanded(child: SizedBox.shrink()),  // ===========================================  ],  ),  );  } }  

Результат:

 HalfHeightText(label: "Text")  

Пример текста

Ответ №2:

используйте ширину: MediaQuery.of(контекст).размер.ширина 0,50, его среднее значение, как у пользователя шириной 50%, или же MediaQuery.of(контекст).размер.ширина 0,25, среднее значение 25%