[flutter] flutter 2

Oct 04, 2024

이번엔 이런걸 만들거다.


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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          for (int i = 0; i < 20; i++) Text("안녕"),
        ],
      ),
    );
  }
}

home에 클래스를 넣고 클래스를 만들어준다.

ListView 는 스크롤을 만들어준다.

크롬으로 실행시켜보면 브라우저를 줄였을때 스크롤이 생기는걸 알수 있다.


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 {
  @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)),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Container를 재사용 하기위해 method로 빼자.

var로 처리해서 mIcon과 text를 받아 재사용 가능하게 했다.


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("$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 {
  @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("$text",
              style: TextStyle(
                  color: Colors.black87, fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

pub dev는 MAVEN repository같은 곳이였다.

필요로 하는 오픈소스 라이브러리를 찾을수 있는 곳이다.

이번에 필요한건 google_fonts이다.

프로젝트에 적용하는 법은 두가지가 있다.

먼저 yaml에 바로 넣는법


 google_fonts: ^6.2.1

이걸 yaml파일 dependencies 아래에 넣고 pub get을 한다.

두번째는 터미널을 이용해 넣는 법이있다.

이 방법이 더 간단해 보이기에 적응해야겠다.

터미널에 복사해서 엔터키를 누르면 된다.

라이브러리를 가져오는건 다 끝났고 어떤 문자체가 있는지 보기위해선

아래의 url로 가서 찾아보면 된다.

문자체 이외에 사이즈나 다양한걸 볼 수 있다.

https://fonts.google.com/

마지막으로 라이브러리를 임포트 해주고 해당 클래스에서 사용하면 된다.


import 'package:google_fonts/google_fonts.dart';

이 방법은 전부 pub dev에 다 설명이 나와있다.

Text에 적용 을 해보았다. google에 가서 다양한 문체들을 넣어서 적용시켜 보았다.

아래는 지금까지의 전체 코드이다.


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 {
  @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.patuaOne(
          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("$text",
              style: TextStyle(
                  color: Colors.black87, fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

사진 비율을 정해 넣기

이제는 커피사진을 넣어볼거다.

저번처럼 assets 폴더를 만들고, yaml에 asset을 설정해주었다.

그뒤 Image.asset으로 그림을 불러왔다.

ClipRRect클래스는 사진의 꼭지점들을 둥글게 해주는 클래스

AspectRatio클래스는 해당 사진의 비율을 정해주는 클래스였다.


AspectRatio(
              aspectRatio: 3 / 2,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.asset(
                  "assets/coffee.jpeg",
                  fit: BoxFit.cover,
                ),
              ),
            ),

사진과 글들을 좀 넣고,

이것을 Column에 넣어주었다. 인제 이것을 재사용 가능하게 Class로 뽑아내주자.

해당 페이지에서만 사용한다면 method, 다른페이지에서도 사용한다면 Class로 뽑아준다고 한다.


Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                AspectRatio(
                  aspectRatio: 3 / 2,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset(
                      "assets/coffee.jpeg",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                SizedBox(height: 10),
                Text(
                  "coffee",
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  "Have you ever made your own coffee? Once you've tried a homemade coffee, you'll never go back.",
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
              ],
            ),

이렇게 하면 사진과 글들을 모아놓은 하나의 클래스를 만들어줄 수 있다.

인제 저걸 재 사용할 수 있다.

근데 전부 커피만 나오고있으니 클래스에 상태값을 받을수 있게

필드 값과 생성자를 수정해준다.


class RecipeItem extends StatelessWidget {
  String imageName;
  String text;

  RecipeItem(this.imageName, this.text);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AspectRatio(
            aspectRatio: 3 / 2,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.asset(
                "assets/${imageName}",
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(height: 10),
          Text(
            "$text",
            style: TextStyle(fontSize: 20),
          ),
          Text(
            "Have you ever made your own $text? Once you've tried a homemade $text, you'll never go back.",
            style: TextStyle(color: Colors.grey, fontSize: 12),
          ),
        ],
      ),
    );
  }
}

적정한 곳에 필드값을 넣어준다.

생성자에 파라미터값을 넣어주면 된다.

See more posts

[flutter] flutter 2

More articles

[flutter] flutter 4

[flutter] flutter 3

[flutter] flutter 1

[Dart] 6. null 병합연산자