본문 바로가기
  • Let's study
Android/Flutter

레이아웃 빌딩 - Flutter

by 코딩고수이고파 2022. 1. 23.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var titleSection = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start, //왼쪽 정렬
          children: <Widget>[
            Text("Oeschinen Lake Comapground",
                style: TextStyle(
                    fontWeight: FontWeight.bold, fontSize: 20)), //텍스트 스타일 주기
            Text("Kandresteg, Switzerland",
                style: TextStyle(color: Colors.grey, fontSize: 20)),
          ],
        ),
        Padding(padding: EdgeInsets.all(8.0)),
        Icon(Icons.star, size: 22, color: Colors.deepOrange),
        Text('41', style: TextStyle(fontSize: 22))
      ],
    );
    var bottonSection = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Column(children: <Widget>[
            Icon(Icons.call, size: 37, color: Colors.lightBlue),
            Padding(padding: EdgeInsets.all(3.0),),
            Text('CALL', style: TextStyle(color: Colors.lightBlue))
          ],
        ),
        Padding(padding: EdgeInsets.all(40.0)),
        Column(children: <Widget>[
          Icon(Icons.near_me, size: 37, color: Colors.lightBlue),
          Padding(padding: EdgeInsets.all(3.0),),
          Text('ROUTE', style: TextStyle(color: Colors.lightBlue))
        ]),
        Padding(padding: EdgeInsets.all(40.0)),
        Column(children: <Widget>[
          Icon(Icons.share, size: 37, color: Colors.lightBlue),
          Padding(padding: EdgeInsets.all(3.0),),
          Text('SHARE', style: TextStyle(color: Colors.lightBlue))
        ])
      ],
    );
    var textSection = Container(
      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.',
          style: TextStyle(fontSize: 18)),
      padding:EdgeInsets.all(30.0),
    );
    return Scaffold(
      body: Column(
        children: <Widget>[
          Image.network(
              "https://static.wixstatic.com/media/fce6e3_bd3fa7fa08a24f8cb445b2432d18738c~mv2.jpg/v1/fill/w_750,h_428,al_c,q_90/fce6e3_bd3fa7fa08a24f8cb445b2432d18738c~mv2.jpg",
              height: 240,
              width: 600,
              fit: BoxFit.cover), //인터넷 이미지 출력
          Padding(padding: EdgeInsets.all(12.0)),
          titleSection,
          Padding(padding: EdgeInsets.all(10.0)),
          bottonSection,
          //Padding(padding: EdgeInsets.all(7.0)),
          textSection
        ],
      ),
    );
  }
}

'Android > Flutter' 카테고리의 다른 글

[Flutter] Elevated Button  (0) 2022.07.08
반응형 앱 만들기 - Flutter  (0) 2022.01.23
카운팅 앱 만들기 - Flutter  (0) 2022.01.23

댓글