Кто-нибудь знает, как я могу создать этот контейнер во флаттере? Это результат, который я хочу получить
Я пробовал что-то подобное, но не знаю, как добавить их, чтобы они отображались определенным образом.
Container(
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
color: Colors.black.withOpacity(0.1)),
child: Text('Subcribers \n 365'),
),





Вы могли бы проделать то же самое, используя Row, Column ивертикальныйделитель, вот так:
import 'package:flutter/material.dart';
class StatsCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 10,
spreadRadius: 2,
),
],
),
child: IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
StatItem(label: 'Subscribers', value: '356'),
const VerticalDivider(
width: 20,
thickness: 2,
color: Colors.black,
),
StatItem(label: 'Programs', value: '8'),
const VerticalDivider(
width: 20,
thickness: 2,
color: Colors.black87,
),
StatItem(label: 'Rating', value: '5.0'),
],
),
));
}
}
class StatItem extends StatelessWidget {
final String label;
final String value;
StatItem({required this.label, required this.value});
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 5),
Text(
value,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
],
);
}
}
При этом вы можете просто использовать компонент StatsCard().
Это показывает мне это:
попробуйте StadiumBorder вместо borderRadius
@hensou попробуйте использовать виджет «Расширенный» для каждого элемента в строке и увеличьте округлость этого контейнера.
попробуй это:
class CustomCard extends StatelessWidget {
const CustomCard({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 66,
width: MediaQuery.of(context).size.width * 0.73,
padding: const EdgeInsets.only(left: 10),
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: Colors.grey[200],
shadows: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 2,
),
],
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Item(
title: 'Subscriber',
subtitle: '356',
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Item(
title: 'Programs',
subtitle: '8',
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Item(
title: 'Rating',
subtitle: '5',
),
],
),
),
),
);
}
}
class Item extends StatelessWidget {
final String title;
final String subtitle;
const Item({
super.key,
required this.title,
required this.subtitle,
});
@override
Widget build(BuildContext context) {
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(title),
Text(subtitle),
],
),
);
}
}
Спасибо тебе огромное, ты ангел на земле!!
Я попытался сделать его немного больше, и у меня возникла проблема с подписчиками: слева не хватает места, я изменил «MediaQuery.of(context).size.width * 0,90», но все равно не дает не помогу
не упоминай об этом @Lili, я внес некоторые изменения в код, взгляни на него и дай мне знать, если есть что-то еще.
Выключено, это коснулось всех, просто виджет расширился везде
@Lili Не могли бы вы включить свой код, в котором вы столкнулись с проблемой, в тело вашего вопроса?
Использовать строку как дочернюю