123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- import 'package:flutter/material.dart';
- // Uncomment lines 3 and 6 to view the visual layout at runtime.
- // import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
- void main() {
- // debugPaintSizeEnabled = true;
- runApp(const MyApp());
- }
- 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(
- /*1*/
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- /*2*/
- Container(
- padding: const EdgeInsets.only(bottom: 8),
- child: const Text(
- 'Oeschinen Lake Campground',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- ),
- ),
- ),
- Text(
- 'Kandersteg, Switzerland',
- style: TextStyle(
- color: Colors.grey[500],
- ),
- ),
- ],
- ),
- ),
- /*3*/
- Icon(
- Icons.star,
- color: Colors.red[500],
- ),
- const Text('41'),
- ],
- ),
- );
- Color color = Theme.of(context).primaryColor;
- Widget buttonSection = Row(
- mainAxisAlignment: MainAxisAlignment.spaceEvenly,
- children: [
- _buildButtonColumn(color, Icons.call, 'CALL'),
- _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
- _buildButtonColumn(color, Icons.share, 'SHARE'),
- ],
- );
- Widget textSection = const Padding(
- padding: EdgeInsets.all(32),
- child: Text(
- 'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
- 'Alps. Situated 1,578 meters above sea level, it is one of the '
- 'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
- 'half-hour walk through pastures and pine forest, leads you to the '
- 'lake, which warms to 20 degrees Celsius in the summer. Activities '
- 'enjoyed here include rowing, and riding the summer toboggan run.',
- softWrap: true,
- ),
- );
- return MaterialApp(
- title: 'Flutter layout demo',
- home: Scaffold(
- appBar: AppBar(
- title: const Text('Flutter layout demo'),
- ),
- body: ListView(
- children: [
- Image.asset(
- 'images/lake.jpg',
- width: 600,
- height: 240,
- fit: BoxFit.cover,
- ),
- 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,
- ),
- ),
- ),
- ],
- );
- }
- }
|