home_page

home_page는 NestedScrollView, SliverList를 사용한다.

sliverList는 gridview나 listview같은 리스트들을 함께 스크롤 하고싶을때 사용한다. 

sliverList는 delegate 매개변수를 가지고 있습니다. 

delegate는 뷰를 스크롤하면서 항목을 제공한다.

SliverChildListDelegate로 하위 요소 항목을 명시할 수 있다.

 

구현화면

전체코드

import 'package:finalproject_front/constants.dart';

import 'package:finalproject_front/pages/main/home/components/category_select.dart';
import 'package:finalproject_front/pages/main/home/components/class_list.dart';

import 'package:finalproject_front/pages/search/search_detail/search_detail_page.dart';
import 'package:finalproject_front/pages/search/search_main/search_main_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(context, "/searchMain"),
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverList(
                delegate: SliverChildListDelegate([
              Container(
                child: Padding(
                  padding: const EdgeInsets.all(24.0),
                  child: Column(
                    children: [
                      _buildMainImage(),
                      SizedBox(height: 15),
                      _buildCategory(),
                    ],
                  ),
                ),
              ),
              _buildDivider()
            ]))
          ];
        },
        body: ClassList(routePath: "/lessonDetail"),
      ),
    );
  }

  Divider _buildDivider() {
    return Divider(
      color: gBorderColor,
      thickness: 1.0,
    );
  }

  Row _buildCategory() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        CategorySelect(
            image: "assets/sports.png", text: "뷰티・운동", path: "/categoryDetail"),
        CategorySelect(
            image: "assets/Headphones.png",
            text: "댄스・뮤직",
            path: "/categoryDetail"),
        CategorySelect(
            image: "assets/art.png", text: "미술・문학", path: "/categoryDetail"),
        CategorySelect(
            image: "assets/Search.png", text: "공예・기타", path: "/categoryDetail"),
      ],
    );
  }

  ClipRRect _buildMainImage() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: Image.asset(
        "assets/home1.jpg",
        fit: BoxFit.cover,
        height: 100,
        width: 400,
      ),
    );
  }

  AppBar _buildAppBar(context, path) {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 1.0,
      actions: [
        Padding(
          padding: const EdgeInsets.all(10.0),
          child: OutlinedButton(
            onPressed: () {
              Navigator.pushNamed(context, "${path}");
            },
            child: Row(
              children: [
                Icon(
                  CupertinoIcons.search,
                  color: Colors.black,
                ),
                SizedBox(
                  width: 5,
                ),
                Text(
                  "Search....",
                  style: TextStyle(color: Colors.grey, fontSize: 14),
                ),
              ],
            ),
            style: OutlinedButton.styleFrom(
                maximumSize: Size(160, 40),
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                )),
          ),
        ),
        SizedBox(
          width: 10,
        ),
        Icon(
          CupertinoIcons.bell,
          color: Colors.black,
          size: 26,
        ),
        SizedBox(
          width: 10,
        ),
      ],
    );
  }
}