flutter

2. 플러티 배우기

강재영's avatar
강재영
Sep 30, 2024
2. 플러티 배우기
Contents
1. 페이지나누기(우선homepage) 1. 컴포넌트 하나 만들기타입추론으로 매개변수 받고 정렬하기메소드로 뺴서 가독성올리기AppBarpub.dev플러터에서 사용하는 의존성관리도구 (스프링은 그래들)최종
 

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("안녕"),
        ],
      ),
    );
  }
}
컬렉션안에 FOR익스프레션이 가능하다.
 

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),
                    ),
                  ],
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
 
notion image
 
notion image
 
notion image
 
 
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),
                  ),
                ],
              ),
            );
  }
}
 
notion image
 
 

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

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),
        ],
      ),
notion image
 
 

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

 
notion image
 
notion image
 
notion image
 
 

2. 사용방법 문서로 보기

notion image
 
notion image
 
notion image
 
 

최종

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),
                  ),
                ],
              ),
            );
  }
}
 
notion image
Share article

More articles

See more posts

7. 키보드문제 스크롤(scroll) 처리방법

October 2, 2024
7. 키보드문제 스크롤(scroll) 처리방법

3.플러터 기본구조 정리

October 1, 2024
3.플러터 기본구조 정리

1. 플러터 배우기

September 30, 2024
1. 플러터 배우기

7. is와 has 다중상속

September 27, 2024
7. is와 has 다중상속

강재영 블로그

RSS·Powered by Inblog