Create Cards

This commit is contained in:
Владимир Данилов 2024-12-02 21:23:29 +04:00
parent 4ae53b5d53
commit 0404350e28

View File

@ -31,16 +31,8 @@ class MyHomePage extends StatefulWidget {
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Color _color = Colors.limeAccent;
void _incrementCounter() {
setState(() {
_counter++;
_color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -48,31 +40,150 @@ class _MyHomePageState extends State<MyHomePage> {
backgroundColor: _color,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
if (_counter > 10)
Text(
"Why are you clicking?",
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
backgroundColor: _color,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
body: const MyWidget(),
);
}
}
class _CardDate{
final String text;
final String descriptionText;
final IconData icon;
final String? imageUrl;
_CardDate(
this.text,
{
required this.descriptionText,
this.icon = Icons.ac_unit_outlined,
this.imageUrl,
});
}
class MyWidget extends StatelessWidget{
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
final data = [
_CardDate(
'Hi',
descriptionText: 'hello',
icon: Icons.h_mobiledata_sharp,
imageUrl: 'https://avatars.mds.yandex.net/i?id=7cb577fccf8b7354b5248cb8101dd09433fa521f-4253662-images-thumbs&n=13',
),
_CardDate(
'Privet',
descriptionText: 'hello',
icon: Icons.pages,
imageUrl: 'https://avatars.mds.yandex.net/i?id=34f57633c955c47b56c68537076e5bfabb4a397b-4577841-images-thumbs&n=13',
),
_CardDate(
'Arigato',
descriptionText: 'hello',
icon: Icons.account_tree_sharp,
imageUrl: 'https://avatars.mds.yandex.net/i?id=d3e8f5e5c373aec40e18fdb5bc28f98367e0f0d9-4271037-images-thumbs&n=13',
),
];
return Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: data.map((e) => _Card.fromData(e)).toList(),
),
)
);
}
}
class _Card extends StatelessWidget {
final String text;
final String descriptionText;
final IconData icon;
final String? imageUrl;
const _Card(
this.text,
{
required this.descriptionText,
this.icon = Icons.ac_unit_outlined,
this.imageUrl,
}
);
factory _Card.fromData(_CardDate data) => _Card(
data.text,
descriptionText: data.descriptionText,
icon: data.icon,
imageUrl: data.imageUrl,
);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.grey,
width: 2,
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(.5),
spreadRadius: 4,
offset: const Offset(0, 5),
blurRadius: 8,
blurStyle: BlurStyle.normal
)
]
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: SizedBox(
height: 140,
width: 100,
child: Image.network(
imageUrl ?? '',
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => const Placeholder(),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
style: Theme.of(context).textTheme.headlineLarge,
//softWrap: false,
),
Text(
descriptionText,
style: Theme.of(context).textTheme.bodyLarge
),
],
),
),
),
//const Spacer(),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Icon(icon),
),
],
)
);
}
}