# The flutter way Plant APP

{{youtube>LN668OAUrK4}}

위젯이란 무엇인가??


유튜브에서 제공되는 코드를 따라서 앱을 만들어 봅시다. 이렇게 빨리 타이핑 하는데 30분이라니. 두 페이지라서 오래 걸림.

{{ https://github.com/abuanwar072/Plant-App-Flutter-UI/raw/master/plant.png }}

### 프로젝트 생성

<code>
flutter create the_flutter_way_plant_app
</code>

[소스 github](https://github.com/abuanwar072/Plant-App-Flutter-UI)
[내 github](https://github.com/jacegem/the_flutter_way_plant_app)

## 파일 구조

{{ https://i.imgur.com/oDTvvW0.jpg?300 }}

### assets 복사

icon, image 를 다운받아서 프로젝트에 넣는다.

### pubspec.yaml 파일 수정

<code>
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_svg: ^0.17.4
  
  ...
  
  assets:
    - assets/icons/
    - assets/images/
</code>

### constans.dart

{{ https://i.imgur.com/FbvlSWe.jpg?300 }}

<code>
import 'package:flutter/material.dart';

// Colors that we use in our app
const kPrimaryColor = Color(0xFF0C9869);
const kTextColor = Color(0xFF3C4046);
const kBackgroundColor = Color(0xFFF9F8FD);

const double kDefaultPadding = 20.0;

</code>

### MyApp 작성

<code>
import 'package:flutter/material.dart';
import 'package:the_flutter_way_plant_app/constants.dart';
import 'package:the_flutter_way_plant_app/screens/home/home_screen.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Plant App',
      theme: ThemeData(
        scaffoldBackgroundColor: kBackgroundColor,
        primaryColor: kPrimaryColor,
        textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

</code>

### Appbar 만들기

<code>
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
    );
  }

  AppBar buildAppBar() {
    return AppBar(
      elevation: 0,
      leading: IconButton(
        icon: SvgPicture.asset('assets/icons/menu.svg'),
        onPressed: () {},
      ),
    );
  }
}
</code>

## 위젯 구조

## 주요 부분

...