182 lines
5.7 KiB
Dart
182 lines
5.7 KiB
Dart
|
import 'dart:math';
|
|||
|
|
|||
|
import 'package:flutter/material.dart';
|
|||
|
|
|||
|
void main() {
|
|||
|
runApp(const MyApp());
|
|||
|
}
|
|||
|
|
|||
|
class MyApp extends StatelessWidget {
|
|||
|
const MyApp({super.key});
|
|||
|
|
|||
|
// This widget is the root of your application.
|
|||
|
@override
|
|||
|
Widget build(BuildContext context) {
|
|||
|
return MaterialApp(
|
|||
|
title: 'Flutter Demo',
|
|||
|
theme: ThemeData(
|
|||
|
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
|
|||
|
useMaterial3: true,
|
|||
|
),
|
|||
|
home: const MyHomePage(title: 'Энциклопедия пород собак'),
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
class MyHomePage extends StatefulWidget {
|
|||
|
const MyHomePage({super.key, required this.title});
|
|||
|
|
|||
|
final String title;
|
|||
|
|
|||
|
@override
|
|||
|
State<MyHomePage> createState() => _MyHomePageState();
|
|||
|
}
|
|||
|
|
|||
|
class _MyHomePageState extends State<MyHomePage> {
|
|||
|
|
|||
|
@override
|
|||
|
Widget build(BuildContext context) {
|
|||
|
return Scaffold(
|
|||
|
appBar: AppBar(
|
|||
|
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
|
|||
|
title: Text(widget.title),
|
|||
|
),
|
|||
|
body: const MyWidget(),
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
class MyWidget extends StatelessWidget {
|
|||
|
const MyWidget({super.key});
|
|||
|
|
|||
|
@override
|
|||
|
Widget build(BuildContext context) {
|
|||
|
|
|||
|
final data = [
|
|||
|
_CardData(text:'Немецкая овчарка', desc: 'Отличные охранники и бойцы, уверенные, выносливые', tages:['крупные', 'служебные'] , imageUrl: 'https://i.pinimg.com/originals/37/a2/9a/37a29a34b248ff86d15c5d1aca9a13e0.jpg'),
|
|||
|
_CardData(text: 'Хаски', desc: 'Очень дружелюбные и ласковые, отличные компаньоны', tages:['крупные', 'пастушьи', 'компаньоны'] , imageUrl: 'https://i.pinimg.com/736x/56/c4/f0/56c4f08522549ed68e6782a4461810fc.jpg'),
|
|||
|
_CardData(text: 'Доберман', desc: 'Умные, преданные, с молниеносной реакцией и чувством собственного достоинства', tages:['крупные', 'бойцовые'] , imageUrl: 'https://i.pinimg.com/736x/46/05/4f/46054f5a232d2be0704e5bf2c92c073a.jpg'),
|
|||
|
_CardData(text: 'Колли', desc: 'Общительные, интеллигентные, неагрессивные, сильно привязываются', tages:['крупные', 'компаньоны'] , imageUrl: 'https://i.pinimg.com/originals/b4/9a/59/b49a59cd65b1315bf207896e7022ff96.jpg'),
|
|||
|
_CardData(text: 'Корги', desc: 'Жизнерадостные, активные, социальные, обучаемые, ', tages:['маленькие', 'декоративные'] , imageUrl: 'https://avatars.mds.yandex.net/i?id=0d1565e44373e7be60d235ebfe642396_l-4776319-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 desc;
|
|||
|
final List<String> tages;
|
|||
|
final String imageUrl;
|
|||
|
|
|||
|
_Card(this.text, this.desc, this.tages, this.imageUrl);
|
|||
|
|
|||
|
factory _Card.fromData(_CardData data) => _Card(
|
|||
|
data.text,
|
|||
|
data.desc,
|
|||
|
data.tages,
|
|||
|
data.imageUrl
|
|||
|
);
|
|||
|
|
|||
|
@override
|
|||
|
Widget build(BuildContext context) {
|
|||
|
return Container(
|
|||
|
height: 150,
|
|||
|
margin: const EdgeInsets.only(top: 16),
|
|||
|
decoration: BoxDecoration(
|
|||
|
color: Colors.white,
|
|||
|
boxShadow: [
|
|||
|
BoxShadow(
|
|||
|
color: Colors.black26.withOpacity(0.5),
|
|||
|
offset: const Offset(0, 5),
|
|||
|
blurRadius: 8,
|
|||
|
spreadRadius: 4
|
|||
|
)
|
|||
|
]
|
|||
|
),
|
|||
|
child: Row(
|
|||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|||
|
children: [
|
|||
|
Expanded(
|
|||
|
child: ClipRRect(
|
|||
|
child: SizedBox(
|
|||
|
height: 150,
|
|||
|
width: 400,
|
|||
|
child: Image.network(
|
|||
|
imageUrl ?? '',
|
|||
|
fit: BoxFit.cover,
|
|||
|
errorBuilder: (_, __, ___) => const Placeholder(),
|
|||
|
),
|
|||
|
),
|
|||
|
)
|
|||
|
),
|
|||
|
Expanded(
|
|||
|
child: Padding(
|
|||
|
padding: const EdgeInsets.all(8.0),
|
|||
|
child: Column(
|
|||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|||
|
children: [
|
|||
|
Text(
|
|||
|
text,
|
|||
|
style: Theme.of(context).textTheme.titleMedium
|
|||
|
),
|
|||
|
Text (
|
|||
|
desc,
|
|||
|
style: TextStyle(
|
|||
|
fontSize: 12.0,
|
|||
|
height: 0.99
|
|||
|
),
|
|||
|
//style: Theme.of(context).textTheme.bodySmall,
|
|||
|
),
|
|||
|
Wrap(
|
|||
|
spacing: 2.0,
|
|||
|
runSpacing: 3.0,
|
|||
|
children: tages.map((e) => _buildTag(e)).toList(),
|
|||
|
)
|
|||
|
],
|
|||
|
),
|
|||
|
),
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
Widget _buildTag(String tag) {
|
|||
|
return Container(
|
|||
|
margin: const EdgeInsets.only(right: 5.0),
|
|||
|
padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 2.0),
|
|||
|
decoration: BoxDecoration(
|
|||
|
color: Colors.orange,
|
|||
|
borderRadius: BorderRadius.circular(16.0),
|
|||
|
),
|
|||
|
child: Text(
|
|||
|
tag,
|
|||
|
style: TextStyle(
|
|||
|
color: Colors.white,
|
|||
|
fontSize: 10.0,
|
|||
|
),
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
class _CardData {
|
|||
|
final String text;
|
|||
|
final String desc;
|
|||
|
final List<String> tages;
|
|||
|
final String imageUrl;
|
|||
|
|
|||
|
_CardData({required this.text, required this.desc, required this.tages, required this.imageUrl});
|
|||
|
}
|
|||
|
|