본문 바로가기

Flutter397

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.
Flutter - RotatedBox, Transform.rotate, AnimatedBuilder, 위젯 회전하기 안녕하세요 독학코딩입니다. 오늘은 Flutter에서 위젯을 세로로 배치하는 방법에 대해서 배워보겠습니다. 그리고 세로 배치와는 비슷하지만 효과와 쓰임새가 다른 위젯 회전에 대해서도 배워보겠습니다. Flutter RotatedBox Flutter에서 위젯을 90도 혹은 180도 회전에서 배치하는 것은 상당히 간단합니다. 레이아웃을 세로 정의할 필요도 없습니다. 그저 RotatedBox만 사용하시면 됩니다. class FirstRoute extends StatefulWidget { const FirstRoute({Key? key}) : super(key: key); @override State createState() => _FirstRouteState(); } class _FirstRouteState ex.. 2022. 4. 30.

티스토리툴바