밀리의 서재 UI 클론

기간: 2022/9/30~2022/10/8(9일)

<투데이-NOW탭>

슬라이더: carousel_slider 라이브러리 사용

CarouselSlider.builder(
  options: CarouselOptions(
      viewportFraction: 1,
      height: 300.0,
      autoPlay: true,
      onPageChanged: (index, reason) {
        setState(() {
          currentPage = index;
        });
      }),
  itemCount: 3,
  itemBuilder: (BuildContext context, int index, int realIndex) {
    final String title = dataList[index]['title'] ?? 'title';
    final subTitle = dataList[index]['subTitle'] ?? 'subTitle';
    final img = dataList[index]['img'] ?? 'images/bear.png';
    
    return ...

배경 블러효과: ImageFiltered 위젯 사용

Widget build(BuildContext context) {
  return Positioned(
    left: -20,
    right: -20,
    bottom: -20,
    top: -20,
    child: ImageFiltered(
      imageFilter: ImageFilter.blur(
        tileMode: TileMode.decal,
        sigmaY: 40,
        sigmaX: 40,
      ),
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: snapshot.data![index].thumbnail == ''
                ? AssetImage('images/emptybookcover.png') as ImageProvider
                : NetworkImage(
                    snapshot.data![index].thumbnail,
                  ),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
  );
}

사용 api:

    Uri url = Uri.parse(
        'https://www.googleapis.com/books/v1/volumes?q=$keyword&startIndex=$startIndex'); 
    final response = await http.get(url);

api 참고링크:

https://m.blog.naver.com/gunzok/222004426433

앱인벤터#79] 구글 북스 API로 책 검색하기 ① XML 파싱의 방법

그동안 파싱 관련 앱인벤터 포스팅이 없었습니다. 사실 작년에 파싱 관련 포스팅(#67, #69)을 했었는데, 공...

blog.naver.com

공지사항 열고 닫기: Visibility 위젯 사용

Visibility(
  visible: _isVisible[index],
  child: Container(
    padding: EdgeInsets.all(10),
    child: SelectableText.rich(
      TextSpan(
        text: '안녕하세요. 독서와 무제한 친해지리, 밀리의 서재입니다.\n',
        children: [
          TextSpan(
            text: '1. 오디오 플레이어 추가\n',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(
              text:
                  '평범하지만 따뜻한 이야기 <어서오세요. 휴남동 서점입니다> 오디오 드라마가 오픈되었는데요. 이에 맞춰 오연서, 이수혁의 목소리를 더욱 편리하게 들어보실 수 있도록 오디오 플레이어가 추가되었습니다.\n'),
          WidgetSpan(
            child: SizedBox(
                height: 220,
                width: 150,
                child: Image.asset(
                  'images/img_audiodrama.jpg',
                  fit: BoxFit.contain,
                )),
          ),
          TextSpan(text: '\n최근 들은 오디오 메뉴를 통해 바로 이용하실 수 있어요.'),
        ],
      ),
    ),
    color: Colors.grey[300],
    height: 400,
    width: double.infinity,
  ),
),