2. 플러티 배우기

1. 페이지나누기(우선homepage)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

2. 집고 넘어가기 FOR익스프레션

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {

  //스케프폴더에 그림은 바디에 그림을 그리는데 컬럼말고 listview를 사용해서 스크롤이 가능하게 함
  //만약 COLUM으로 넣었따면 높이를 초과했다면 터진다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          //컬렉션안에 FOR익스프레션이 가능하다.
          for(int i=0;i<20;i++) Text("안녕"),
        ],
      ),
    );
  }
}

1. 컴포넌트 하나 만들기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  //스케프폴더에 그림은 바디에 그림을 그리는데 컬럼말고 listview를 사용해서 스크롤이 가능하게 함
  //만약 COLUM으로 넣었따면 높이를 초과했다면 터진다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Text("Recipes"),
          Row(
            children: [
              Container(
                width: 60,
                height: 80,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black12),
                  borderRadius: BorderRadius.circular(30)
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.food_bank,
                      color: Colors.redAccent,
                      size: 30,
                    ),
                    SizedBox(height: 5,),
                    Text(
                      "ALL",
                      style: TextStyle(
                          color: Colors.black87,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  //스케프폴더에 그림은 바디에 그림을 그리는데 컬럼말고 listview를 사용해서 스크롤이 가능하게 함
  //만약 COLUM으로 넣었따면 높이를 초과했다면 터진다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Text("Recipes"),
          Row(
            children: [
              _mIcon(),
              _mIcon(),
              _mIcon(),
              _mIcon(),
            ],
          )
        ],
      ),
    );
  }

  Container _mIcon() {
    return Container(
              width: 60,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black12),
                borderRadius: BorderRadius.circular(30)
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.food_bank,
                    color: Colors.redAccent,
                    size: 30,
                  ),
                  SizedBox(height: 5,),
                  Text(
                    "ALL",
                    style: TextStyle(
                        color: Colors.black87,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            );
  }
}

타입추론으로 매개변수 받고 정렬하기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  //스케프폴더에 그림은 바디에 그림을 그리는데 컬럼말고 listview를 사용해서 스크롤이 가능하게 함
  //만약 COLUM으로 넣었따면 높이를 초과했다면 터진다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Text("Recipes", style: TextStyle(fontSize: 30),),
          Row(
            children: [
              _mIcon(Icons.food_bank,"ALL"),
              SizedBox(width: 25),
              _mIcon(Icons.emoji_food_beverage,"Coffee"),
              SizedBox(width: 25),
              _mIcon(Icons.fastfood,"Burger"),
              SizedBox(width: 25),
              _mIcon(Icons.local_pizza,"Pizza"),

            ],
          )
        ],
      ),
    );
  }

  Container _mIcon(mIcon, text) {
    return Container(
              width: 60,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black12),
                borderRadius: BorderRadius.circular(30)
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    mIcon,
                    color: Colors.redAccent,
                    size: 30,
                  ),
                  SizedBox(height: 5,),
                  Text(
                    //null이여도 안터지게 "" 안에 바인딩하기
                    "$text",
                    style: TextStyle(
                        color: Colors.black87,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            );
  }
}

메소드로 뺴서 가독성올리기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  //스케프폴더에 그림은 바디에 그림을 그리는데 컬럼말고 listview를 사용해서 스크롤이 가능하게 함
  //만약 COLUM으로 넣었따면 높이를 초과했다면 터진다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal:  16.0),
        child: ListView(
          children: [
            _title(),
            _menu()
          ],
        ),
      ),
    );
  }

  Text _title() => Text("Recipes", style: TextStyle(fontSize: 30),);

  Row _menu() {
    return Row(
            children: [
              _mIcon(Icons.food_bank,"ALL"),
              SizedBox(width: 25),
              _mIcon(Icons.emoji_food_beverage,"Coffee"),
              SizedBox(width: 25),
              _mIcon(Icons.fastfood,"Burger"),
              SizedBox(width: 25),
              _mIcon(Icons.local_pizza,"Pizza"),

            ],
          );
  }

  Container _mIcon(IconData mIcon,String text) {
    return Container(
              width: 60,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black12),
                borderRadius: BorderRadius.circular(30)
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    mIcon,
                    color: Colors.redAccent,
                    size: 30,
                  ),
                  SizedBox(height: 5,),
                  Text(
                    //null이여도 안터지게 "" 안에 바인딩하기
                    "$text",
                    style: TextStyle(
                        color: Colors.black87,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            );
  }
}

AppBar

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.arrow_back_ios),
        title: Text("제목자리"),
        actions: [
          Icon(Icons.search),
          Icon(CupertinoIcons.heart),
        ],
      ),

pub.dev플러터에서 사용하는 의존성관리도구 (스프링은 그래들)

2. 사용방법 문서로 보기

최종

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  //스케프폴더에 그림은 바디에 그림을 그리는데 컬럼말고 listview를 사용해서 스크롤이 가능하게 함
  //만약 COLUM으로 넣었따면 높이를 초과했다면 터진다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Icon(Icons.search),
          SizedBox(width: 16),
          Icon(CupertinoIcons.heart, color: Colors.redAccent),
          SizedBox(width: 16,),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal:  16.0),
        child: ListView(
          children: [
            _title(),
            SizedBox(height: 10),
            _menu(),
            SizedBox(height: 10),
            Container(
              height: 300,
              color: Colors.red,
            ),
            Placeholder(),
            Container(
                height: 300,
                color: Colors.red
            )
          ],
        ),
      ),
    );
  }

  Text _title() {
    return Text(
      "Recipes", style: GoogleFonts.openSans(
        textStyle: TextStyle(fontSize: 30),
       ),
    );
  }

  Row _menu() {
    return Row(
            children: [
              _mIcon(Icons.food_bank,"ALL"),
              SizedBox(width: 25),
              _mIcon(Icons.emoji_food_beverage,"Coffee"),
              SizedBox(width: 25),
              _mIcon(Icons.fastfood,"Burger"),
              SizedBox(width: 25),
              _mIcon(Icons.local_pizza,"Pizza"),

            ],
          );
  }

  Container _mIcon(IconData mIcon,String text) {
    return Container(
              width: 60,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black12),
                borderRadius: BorderRadius.circular(30)
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    mIcon,
                    color: Colors.redAccent,
                    size: 30,
                  ),
                  SizedBox(height: 5,),
                  Text(
                    //null이여도 안터지게 "" 안에 바인딩하기
                    "$text",
                    style: TextStyle(
                        color: Colors.black87,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            );
  }
}