layout.dart 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. import 'package:flutter/material.dart';
  2. // Uncomment lines 3 and 6 to view the visual layout at runtime.
  3. // import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
  4. void main() {
  5. // debugPaintSizeEnabled = true;
  6. runApp(const MyApp());
  7. }
  8. class MyApp extends StatelessWidget {
  9. const MyApp({super.key});
  10. @override
  11. Widget build(BuildContext context) {
  12. Widget titleSection = Container(
  13. padding: const EdgeInsets.all(32),
  14. child: Row(
  15. children: [
  16. Expanded(
  17. /*1*/
  18. child: Column(
  19. crossAxisAlignment: CrossAxisAlignment.start,
  20. children: [
  21. /*2*/
  22. Container(
  23. padding: const EdgeInsets.only(bottom: 8),
  24. child: const Text(
  25. 'Oeschinen Lake Campground',
  26. style: TextStyle(
  27. fontWeight: FontWeight.bold,
  28. ),
  29. ),
  30. ),
  31. Text(
  32. 'Kandersteg, Switzerland',
  33. style: TextStyle(
  34. color: Colors.grey[500],
  35. ),
  36. ),
  37. ],
  38. ),
  39. ),
  40. /*3*/
  41. Icon(
  42. Icons.star,
  43. color: Colors.red[500],
  44. ),
  45. const Text('41'),
  46. ],
  47. ),
  48. );
  49. Color color = Theme.of(context).primaryColor;
  50. Widget buttonSection = Row(
  51. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  52. children: [
  53. _buildButtonColumn(color, Icons.call, 'CALL'),
  54. _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
  55. _buildButtonColumn(color, Icons.share, 'SHARE'),
  56. ],
  57. );
  58. Widget textSection = const Padding(
  59. padding: EdgeInsets.all(32),
  60. child: Text(
  61. 'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
  62. 'Alps. Situated 1,578 meters above sea level, it is one of the '
  63. 'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
  64. 'half-hour walk through pastures and pine forest, leads you to the '
  65. 'lake, which warms to 20 degrees Celsius in the summer. Activities '
  66. 'enjoyed here include rowing, and riding the summer toboggan run.',
  67. softWrap: true,
  68. ),
  69. );
  70. return MaterialApp(
  71. title: 'Flutter layout demo',
  72. home: Scaffold(
  73. appBar: AppBar(
  74. title: const Text('Flutter layout demo'),
  75. ),
  76. body: ListView(
  77. children: [
  78. Image.asset(
  79. 'images/lake.jpg',
  80. width: 600,
  81. height: 240,
  82. fit: BoxFit.cover,
  83. ),
  84. titleSection,
  85. buttonSection,
  86. textSection,
  87. ],
  88. ),
  89. ),
  90. );
  91. }
  92. Column _buildButtonColumn(Color color, IconData icon, String label) {
  93. return Column(
  94. mainAxisSize: MainAxisSize.min,
  95. mainAxisAlignment: MainAxisAlignment.center,
  96. children: [
  97. Icon(icon, color: color),
  98. Container(
  99. margin: const EdgeInsets.only(top: 8),
  100. child: Text(
  101. label,
  102. style: TextStyle(
  103. fontSize: 12,
  104. fontWeight: FontWeight.w400,
  105. color: color,
  106. ),
  107. ),
  108. ),
  109. ],
  110. );
  111. }
  112. }