커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
Card 위젯에 대하여
앱개발 종합반 - 플러터 v8
1주차
북마크
유*재
댓글
4
추천
0
조회수
11
조회수
11
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


                return Card(

                  shape: RoundedRectangleBorder(

                    borderRadius: BorderRadius.circular(16.0),

                  ),


Card 경계를 둥글게 하려고 설정했는데


에뮬레이터엔 이미지가 그대로 사각형으로 나옵니다.


이미지 경계를 둥글게 하려면 어떻게 해야하나요?



import 'package:flutter/material.dart';


void main() {

  runApp(MyApp());

}


class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);


  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: HomePage(), // 홈페이지 보여주기

    );

  }

}


class HomePage extends StatelessWidget {

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


  @override

  Widget build(BuildContext context) {

    // 영화 제목, 사진 데이터

    List<Map<String, dynamic>> dataList = [

      {

        "category": "탑건: 매버릭",

        "imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg",

      },

      {

        "category": "마녀2",

        "imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg",

      },

      {

        "category": "범죄도시2",

        "imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg",

      },

      {

        "category": "헤어질 결심",

        "imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg",

      },

      {

        "category": "브로커",

        "imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg",

      },

      {

        "category": "문폴",

        "imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg",

      },

    ];


    // 화면에 보이는 영역

    return Scaffold(

      appBar: AppBar(

        elevation: 0,

        backgroundColor: Colors.white,

        centerTitle: false,

        title: Text(

          "Movie Reviews",

          style: TextStyle(

            color: Colors.black,

            fontSize: 28,

            fontWeight: FontWeight.bold,

          ),

        ),

        actions: [

          IconButton(

            onPressed: () {},

            icon: Icon(

              Icons.yard_sharp,

              color: Colors.black38,

            ),

          )

        ],

        iconTheme: IconThemeData(color: Colors.black),

      ),

      body: Column(

        children: [

          Padding(

            padding: const EdgeInsets.all(10.0),

            child: TextField(

              decoration: InputDecoration(

                hintText: "영화 제목을 검색해주세요.",

                border: OutlineInputBorder(

                  borderSide: BorderSide(color: Colors.black),

                ),

                suffixIcon: IconButton(

                  icon: Icon(Icons.search),

                  onPressed: () {},

                ),

              ),

            ),

          ),

          Divider(height: 1),

          Expanded(

            child: ListView.builder(

              itemCount: dataList.length,

              itemBuilder: (context, index) {

                String category = dataList[index]['category'];

                String imgUrl = dataList[index]['imgUrl'];


                return Card(

                  shape: RoundedRectangleBorder(

                    borderRadius: BorderRadius.circular(16.0),

                  ),

                  child: Stack(

                    alignment: Alignment.center,

                    children: [

                      Image.network(

                        imgUrl,

                        width: double.infinity,

                        height: 200,

                        fit: BoxFit.cover,

                      ),

                      Container(

                        width: double.infinity,

                        height: 100,

                        color: Colors.black.withOpacity(0.5),

                      ),

                      Text(

                        category,

                        style: TextStyle(

                          color: Colors.white,

                          fontSize: 36,

                        ),

                      ),

                    ],

                  ),

                );

              },

            ),

          ),

        ],

      ),

    );

  }

}







취소
 공유
취소
댓글 0
댓글 알림
나의얼굴