Notes

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() {
runApp(const MyApp());
}

late PageController _pageController;
List<String> urlImages = [
"https://cdn3.shoppy.mn/spree/images/1018315/large/b1000.jpg",
"https://www.tolgoilogch.mn/i/1910/MN-LUAENIU-U73YF7X-UPM2T2L-8P",
"https://updown.mn/wp-content/uploads/2020/05/dalai.jpg",
"https://mgl.gogo.mn/newsn/np/2020/07/27/5137763/DSC_1387-174618-19316143251.jpeg"
];

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
Widget titleSection = Container(
padding: const EdgeInsets.all(32),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom: 8),
child: const Text(
'Хөвсгөл далай',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Text(
'Khatgal, Mongolia',
style: TextStyle(
color: Colors.grey[500],
),
),
],
),
),
Icon(
Icons.star,
color: Colors.red[500],
),
const Text('98'),
],
),
);

Color color = Theme.of(context).primaryColor;

Widget buttonSection = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildButtonColumn(color, Icons.favorite, 'LIKE'),
_buildButtonColumn(color, Icons.near_me, 'ROUTE'),
_buildButtonColumn(color, Icons.share, 'SHARE'),
],
);

Widget textSection = const Padding(
padding: EdgeInsets.all(32),
child: Text(
'Хөвсгөл нуур нь Монгол улсын хойд хэсэгт Хөвсгөл'
'аймагт оршдог. Энэ нуур нь Монголын хамгийн их '
'эзлэхүүнтэй, хамгийн гүн нуур юм. Хөвсгөл нуур нь'
' дэлхийн арван долоон эртний нуурын нэг юм. 2 сая'
' гаруй жилийн настай хэмээн тооцоолсон байдаг.'
' Нийт усны эзлэхүүн 381 км³ байдаг нь дэлхийн '
'цэнгэг усны 0.4 хувьтай тэнцэнэ.',
softWrap: true,
),
);

return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Монголоороо аялья'),
),
body: ListView(
children: [
CarouselSlider.builder(
itemCount: urlImages.length,
itemBuilder: (context, index, realIndex) {
final urlImage = urlImages[index];
return buildImage(urlImage, index);
},
options: CarouselOptions(height: 300)),
titleSection,
buttonSection,
textSection,
],
),
),
);
}

Column _buildButtonColumn(Color color, IconData icon, String label) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
Container(
margin: const EdgeInsets.only(top: 8),
child: Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color: color,
),
),
),
],
);
}
}

Widget buildImage(String urlImage, int index) => Container(
margin: EdgeInsets.symmetric(horizontal: 12),
color: Colors.grey,
child: Image.network(
urlImage,
fit: BoxFit.cover,
),
);