[Flutter] 5. 반응형 농장 소개 페이지 만들기

말이 반응형이지, 별 누르면 색 바뀌는 정도.
하지만 이 페이지를 활용할 일이 있을 것 같아 올린다.

import 'package:flutter/material.dart'; //  material이라는 패키지를 사용하여 프로젝트를 만들 것이니까!

void main() { //  메인 함수
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  // Stateless는 바뀔 수 없는 것들을 넣고
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: '농장농장',
        theme: ThemeData(primarySwatch: Colors.amber),
        home: MyHomePage(title: '농장농장 - Home Page')

    );
  }
}


class MyHomePage extends StatefulWidget{
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isStared = false;
  int _count = 41;

  @override
  Widget build(BuildContext context) {
    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,
              ),
            ),
          ),
        ],
      );
    }

    var 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('장수군 테리베리 농장',
                    style: TextStyle(fontWeight: FontWeight.bold,),),
                ),
                Text('전라북도 장수군 테리면 베리1길',
                  style: TextStyle(color: Colors.grey[500],),),
              ],
            ),
          ),
          /*3*/
          IconButton(
            onPressed: pressedStar,

            icon: (_isStared ? Icon(Icons.star) : Icon(Icons.star_border)),
            color: Colors.red[500],),
          Text('$_count'),
        ],
      ),
    );


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

    var buttonSection = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildButtonColumn(color, Icons.call, '전화하기'),
        _buildButtonColumn(color, Icons.near_me, '찾아가기'),
        _buildButtonColumn(color, Icons.share, '공유하기'),
      ],
    );

    var textSection = const Padding(
      padding: EdgeInsets.all(32),
      child: Text(
        '안녕하세요👨‍🌾. 테리베리 농장입니다.\n'
        '저희 농장은 다음 제품을 취급합니다.'
        '\n\n 🍎사과🍎: 9 ~ 11월 수확(사과즙 상시 판매)'
        '\n 🍒오미자🍒: 9월 예정(액기스 상시 판매)'
        '\n 🍅토마토🍅: '
        '\n\n 건강과 정성을 제공하는 농장이 되겠습니다!',
        softWrap: true,
      ),
    );

    return Scaffold(
        body: Column(
          children: <Widget>[
            Image.network(
                "https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http:%2F%2Fcfile28.uf.tistory.com%2Fimage%2F03535A3551BD7FB627D4E8",
                height: 240, width: 600, fit: BoxFit.cover),
            titleSection,
            buttonSection,
            textSection

          ],

        )
    );
  }

  void pressedStar() {
    setState(()
      {
        if (_isStared) {
        _isStared = false;
        _count -= 1;
        }
        else {
          _isStared = true;
          _count += 1;
        }
      }
    );

  }
}