본문 바로가기

Flutter/Flutter 위젯12

Flutter Padding, 위젯 사이 띄우기 안녕하세요 독학코딩입니다. 오늘은 Flutter의 padding에 대해서 배워보겠습니다. 사람에 따라서 Padding()을 많이 쓰기도 하고 Padding() 대신에 Container.padding 을 쓰시는 분들도 있는데 오늘은 둘 모두에 대해서 배워보고 차이도 설명해드리겠습니다. Flutter Padding List.generate(40, (index) { return Padding( padding: EdgeInsets.all(2), child: Card( color: Colors.blue ), ); } Padding()을 사용하는 방법은 간단합니다. padding을 줄 위젯 (여디서는 Card입니다.)을 Padding() 위젯 안에 넣어주고 padding: EdgeInsets.all(2), 위 처럼.. 2022. 5. 17.
Flutter - GridView.count, 격자 레이아웃, 타일 레이아웃 안녕하세요. 독학코딩입니다. 오늘은 Flutter에서 격자무늬의 레이아웃을 만드는 GridView에 대해서 배워보겠습니다. 리스트로 이루어진 위젯들을 그리드로 만들기 좋고 기본적으로 화면 스크롤을 지원하니 정말 유용한 위젯입니다. Flutter GridView.count GridView.count( crossAxisCount: 4, children: List.generate(40, (index) { return Container( color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0) ); },), ) 위는 GridView.count의 기본 사용 방법 입니다. crossAxicCount는 GridView를 몇 개로 나눌.. 2022. 5. 10.
Flutter - ImageFiltered, BackdropFilter, 이미지 흐림 효과 넣기 안녕하세요 독학코딩입니다. 오늘은 Flutter에서 이미지를 수정하고 효과를 넣는 방법에 대해서 배워보겠습니다. 대표적으로 이미지 흐리기, 이미지 회전, 이미지 굴곡 효과 등에 대해서 배우겠습니다. Flutter ImageFiltered ImageFiltered( imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), child: Image.asset("lib/flutter_img.png", fit: BoxFit.fill,), ) 이미지에 흐림 효과를 넣는 방법은 간단합니다. 흐림 효과를 줄 이미지는 ImageFiltered()로 묶고 imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10)을 설정해주시면 됩니다. 숫자는 .. 2022. 5. 5.
Flutter - PhysicalModel, BoxDecoration, 위젯 그림자 넣기 안녕하세요 독학코딩입니다. 오늘은 Flutter에서 위젯에 그림자를 만드는 방법에 대해서 배워보겠습니다. Flutter PhysicalModel PhysicalModel( child: Container(width: 100, height: 100, color: Colors.blue), color: Colors.black, elevation: 10.0, ) 간단한 그림자를 만드는 방법은 PhysicalModel을 이용하는 방법입니다. PhysicalModel() 안에 그림자를 만들 위젯을 넣고 color와 elevation만 설정하시면 됩니다. 조금 더 상세한 설정은 아래와 같이 가능합니다. shadowColor: Colors.red, shape: BoxShape.circle, shadowColor는 그림자.. 2022. 5. 3.

티스토리툴바