프론트앤드
-
[HTML/CSS] 웹 개발 - 무료 아이콘 삽입하기 / 사이트 추천(fontawesome)웹사이트 개발 2024. 3. 26. 20:19
깔끔한 UI를 제공하는 아이콘 사이트를 소개한다. 주소는 아래와 같다. https://fontawesome.com/icons Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com HTML에서 아이콘을 삽입하기 위해 아래와 같이 스크립트 관련 코드를 삽입해준다. 아래는 5.15.3버전을 이용한 것임을 참고바란다. 실제로 사용할 때에는 아래 코드를 이용한다. fa-music이라 되어 있는 부분에 아이콘의 모양을 넣으면 되고, fa-stack-1x 와 fa-invers..
-
[Flutter] 플러터 반응형 디자인을 위한 글씨 크기 조절 Fitted Box, AutoSizeText, screenutil (Adjust font size for Flutter responsive design)앱 개발/플러터(Flutter) 2023. 8. 10. 00:43
플러터에서 반응형 디자인을 위해 최적화된 글씨크기를 적용하는 코드를 작성해보자. 총 두 가지 방법을 준비했다. Let's write a code that applies optimized font size for reactive design in platters. I prepared a total of two methods. 특히, 해당 포스팅은 flutter screenutil 라이브러리와 함께 사용하는 방법을 알려줄 것이다. In particular, the posting will tell you how to use it with the flutter screenutil library. flutter_screenutil: screenutil은 디바이스의 가로와 세로에 대해 상대적인 크기를 지정할 수 있..
-
[Flutter] 플러터 DefaultTabController 버튼으로 index 컨트롤하기 / change index using Controller앱 개발/플러터(Flutter) 2023. 1. 8. 00:08
플러터에서 옆으로 넘길 수 있는 바를 구현할 때 AppBar가 없는 바를 만들고 싶다면, DefaultTabController를 이용할 수 있다. 오늘 이 게시글에서는 1. DefaultTabController를 이용해서 화면 중간에 옆으로 넘길 수 있는 부분 만들기 2/. DefaultTabController의 인덱스를 마음대로 조정할 수 있게 Controller 설정하기 이 두가지에 대해 알아보겠다. 1. DefaultTabController로 화면 중간에 옆으로 넘길 수 있는 부분 만들기 아래와 같이 DefaultTabController를 Column 안에 넣으면 화면 중간에 옆으로 넘길 수 있는 바를 구현할 수 있다. DefaultTabController의 child로 SizedBox를 사용했는데..
-
[flutter] 플러터 앱바(AppBar)의 제목(title) 가운데 정렬 하기 / 앱바 아이콘 및 제목 검정색으로 설정하기 / AppBar 배경 흰색으로 설정하기앱 개발/플러터(Flutter) 2022. 8. 11. 01:49
플러터 앱바(AppBar)의 제목(title) 가운데 정렬 하기 / 제목 검정색으로 설정하기 / AppBar 배경 흰색으로 설정하기 아래는 AppBar 배경을 흰색으로 설정하고, 글자 색을 검정으로 한 뒤 가운데 정렬한 코드이다. appBar: AppBar( centerTitle: true, elevation: 5, iconTheme: IconThemeData(color: Colors.black), title: Text("설정", style: TextStyle(color: Colors.black), ), backgroundColor: Colors.white, ), 특히 아이콘을 검정으로 하는 코드는 아래와 같다. iconTheme: IconThemeData(color: Colors.black), 아이콘 ..
-
[flutter] 플러터 cursorColor 속성 없어짐 / textfield 커서 색상 변경 방법 / 커서 색상 일괄 적용 / cursorColor property in TextSelectionTheme앱 개발/플러터(Flutter) 2022. 8. 2. 14:45
아래 그림과 같이 커서 색상을 기본 색상에서 원하는 색깔로 바꿔보자 ! textfield의 커서 색상을 일괄 변경하기 위해서 themeData를 사용한다. v1.26.0-18.0.pre. 이전 버전에서는 위와 같이 ThemeData 내에 cursorColor을 설정해주면 됐었지만, 이후 버전부터는 삭제되었다. 대체로, 아래와 같이 작성하면 똑같이 적용된다. textSelectionTheme을 이용한다. 그 안에 cursorColor라는 속성이 있으므로 그것으로 설정을 하면 된다. 참고 : https://api.flutter.dev/flutter/material/ThemeData/cursorColor.html cursorColor property - ThemeData class - material libr..
-
[flutter] 플러터 컨테이너 가로로 스크롤하기 / SingleChildScrollView, scrollDirection, Axis.horizontal앱 개발/플러터(Flutter) 2022. 7. 25. 21:31
플러터의 컨테이너(Container)을 가로로 스크롤 하기 위해서는 어떻게 해야할까? 세로로 스크롤하려면 SingleChildScrollView를 사용하면 됐었다. 이에 관련하여서는 아래 링크를 참고하길 바란다. https://chocohaim1121.tistory.com/35 [flutter] 플러터에서 특정 container 자체를 스크롤 형태로 만드는 방법 Container( child: ( SingleChildScrollView( child: Column( children: [] ) ) ) ) SingleChildScrollView 내부에 child로 Column을 넣고 그 안에 있는 children이 실질적으로 Container 안에서 스크롤 될 부분이.. chocohaim1121.tistory..