플러터 레이아웃 리팩토링

Flutter Layout Demo 코드 (리팩토링 후)

1. main.dart
2. views/layout_demo_page.dart
3. components/icon_group.dart

 

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

import 'views/layout_demo_page.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.orange),
        useMaterial3: true,
      ),
      home: LayoutDemoPage(),
    );
  }
}

//views/layout_demo_page.dart
import 'package:flutter/material.dart';
import '../components/icon_group.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(
          'Flutter Layout Demo',
          style: TextStyle(
              color: Theme.of(context).colorScheme.onPrimaryContainer),
        ),
      ),
      body: Column(
        children: [
          Image.asset(
            'assets/m.webp',
            width: 600,
            height: 190,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(32),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(bottom: 8),
                        child: Text(
                          '스위스에 멋진 캠프 그라운드',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Text(
                        '캔더스태그 / 스위스',
                        style: TextStyle(color: Colors.grey.shade500),
                      ),
                    ],
                  ),
                ),
                Icon(
                  Icons.star,
                  color: Colors.red,
                ),
                Text('41')
              ],
            ),
          ),
          IconGroup(),
          Padding(
            padding: const 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,
            ),
          )
        ],
      ),
    );
  }
}

// components/icon_group.dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          children: [Icon(Icons.call), Text('CALL')],
        ),
        Column(
          children: [Icon(Icons.route), Text('ROUTE')],
        ),
        Column(
          children: [Icon(Icons.share), Text('SHARE')],
        ),
      ],
    );
  }
}