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

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();
  }
}

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 설정

 

1.3 ❗메서드 만들기

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

  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 앱 바 폰트 설정

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