[flutter] 스크롤 있는 앱 화면 만들기 -1

ListView 사용과 구글 폰트 적용방법

HootJem

Sep 30, 2024

Contents

1. 새 프로젝트 만들기 2 앱 바 만들기

이전 포스팅에서 화면을 만들때는 컬럼을 사용하였다. 그러나 컬럼은 스크롤이 안된다..!

그래서 ListView 를 사용할 것이다.

1. 새 프로젝트 만들기

아래에 있는 기본 코드 지우고 여기서 시작합니다.

1.1 클래스 책임 분리


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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class HomePage extends StatelessWidget {

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

여러 화면을 갖는 경우에는 분리가 되어야 하기 때문에 클래스로 생성이 되어야한다.

MyApp 의 home: HomePage() 에 변경되는 페이지가 오면 된다.

1.2 ListView 생성


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          for(int i=0; i<20; i++) Text("안녕"),
        ],
      ),
    );
  }
}

아이콘 설정

아이콘과 폰트 스타일을 설정한다.


Row(
        children: [
          Container(
            child: Column(
              children: [
                Icon(
                    Icons.food_bank,
                    color: Colors.redAccent,
	                  size: 30,
                ),
                Text(
                    "ALL",
                    style: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.bold,
                    )
                ),
              ],
            ),
          ),
        ],
      ),

Container > decoration 설정

border 로 테두리 만들기

테두리 스타일 지정

1.3 ❗메서드 만들기

메뉴 마다 아이콘과 이름이 달라야 하기 때문에 컴포넌트화 하여 매개변수만 차이를 둔다.


Row(
        children: [
          _mIcon(Icons.food_bank, "ALL"),
          _mIcon(Icons.emoji_food_beverage, "coffee"),
          _mIcon(Icons.fastfood, "Burger"),
          _mIcon(Icons.local_pizza, "Pizza"),
        ],
      ),

시그니처는 그냥 받고, 받거나 안받거나 하는 애들만 선택적 매개변수로 받는다.

ListView 에 패딩 준다


  return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: ListView(

2 앱 바 만들기


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

그리고 이런 식으로 스타일 설정한다.


 actions: [
          Icon(Icons.search),
          Icon(CupertinoIcons.heart, color: Colors.redAccent),
          SizedBox(width: 16),
        ],

2.1 앱 바 폰트 설정

pub dev 로 이동

라이브러리 모여있는 오픈소스 모임

기존에 의존성 관리하던건 그래들, 플러터에선 퍼브이다.

복사한 뒤 pubspec.yaml 으로 간다.

기존에 있는 dependencies 에 추가 하거나

터미널에 flutter pub add google_fonts 를 치면 자동으로 주입되기도 한다.

readme를 참고 해야 사용이 가능하다.


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

의존성 주입한 뒤 폰트 변경을 한다.

https://fonts.google.com/

여기서 적절한 사용할 폰트 확인이 가능하다.

저 컨테이너 자리에 디자인 만들어서 컴포넌트 뿌리고,

이 컨테이너 내부를 디자인 하여 뿌려주면 된다.

다음 포스팅에서는 마무리를 해 보자!!

💡

스크롤 있는 화면 -1 https://inblog.ai/hj/flutter-스크롤-있는-화면-만들기-1-30547

스크롤 있는 화면 -2 https://inblog.ai/hj/flutter-스크롤-있는-앱-화면-만들기-2-31249

Contents

1. 새 프로젝트 만들기 2 앱 바 만들기

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

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: ListView( children: [ for(int i=0; i<20; i++) Text("안녕"), ], ), ); } }

Row( children: [ Container( child: Column( children: [ Icon( Icons.food_bank, color: Colors.redAccent, size: 30, ), Text( "ALL", style: TextStyle( color: Colors.black87, fontWeight: FontWeight.bold, ) ), ], ), ), ], ),

Row( children: [ _mIcon(Icons.food_bank, "ALL"), _mIcon(Icons.emoji_food_beverage, "coffee"), _mIcon(Icons.fastfood, "Burger"), _mIcon(Icons.local_pizza, "Pizza"), ], ),

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