Flutter 개발일지 Flutter 개발일지

언제나 그렇듯 나타나는 친구같은 레드 스크린 .. 에러를 읽어봐도 알겠지만 DataTable은 column과 rows로 구성되어 있고, column과 rows의 갯수는 같아야 한다. column이 3개면 rows도 3개가 되야하고, 갯수가 일치하지 않을때 이런 오류를 나타낸다. length* 끝!

개발을 진행하면서 List를 뿌려주거나 깔끔하게 표현해주고자 할때 DataTable을 사용하면 된다. 아래는 간단한 예시이다. DataTable(columns: columns, rows: rows) DataTable은 column과 rows로 구성되어 있다. column은 Header 값, 즉 최상단에 위치한 제목이라고 생각하면 이해하기 쉽다. rows는 Body 값, 제목 안에 들어있는 데이터 내용이라 생각하면 될 듯 하다. 나같은 경우 Datatable을 그릴때 Container 내에 그린다. 그래야 width, height 값을 주기 편하기 때문이다. DataTable 내에는 많은 속성값들이 있는데 나는 horizontalMargin, columnSpacing 두 가지를 주로 사용한다. horizo..

아마 개발을 진행하면서 제일 많이 사용하는 위젯이 Text라고 생각한다. 이 Text를 부분적으로 글자 색상을 변경하고 싶다면? 아래는 기본 Text 사용 예시이다. Flutter에서 기본으로 제공해주는 Material에는 RichText라는 위젯이 존재한다. 이 위젯을 사용하면 부분적으로 색상 변경을 쉽게 할 수 있다. RichText( text: TextSpan( children: [ TextSpan(text: 'Hello,', style: TextStyle(fontSize: 40, color: Colors.black)), TextSpan(text: ' World', style: TextStyle(fontSize: 40, color: Colors.red)) ])), 이 코드는 RichText를 사용하..

Container를 사용하다보면 가끔 이런 오류를 만나게 되는데 color 사용에 대한 오류라고 볼 수 있다. 아마 위와 같은 Container를 그리는데 코드는 Container( width: 410, height: 200, color: Colors.grey, child: Text("Container Test"), ), 이와 동일하거나 비슷할 것이다. Container에 color를 주어도 정상 작동하다 어느순간부터 오류를 나타내게 되는데 .. Flutter 개발자라면 만나기 싫은 1순위, 빨간 화면이 나타난다. 이유는 간단하다. decoration: BoxDecoration(), Container 안에서 박스에 대한 레이아웃 속성을 줄때 decoration을 사용하게 되는데 decoration 내에서..

아마 프로젝트 처음 생성할때 많이 보는 그림일텐데 우측 상단에 위치한 Debug 리본. 아마 상당히 거슬릴 것이다. 나만 그런가..? 무튼 본론만 말하자면 코드 한줄이면 끝난다. return MaterialApp( debugShowCheckedModeBanner: false, debugShowCheckedModeBanner 를 false로 지정해주면 된다. 행여나 Scaffold 를 쓰고싶다면 MaterialApp에서 home을 Scaffold로 감싸주면 된다. return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( 끝!

AppBar는 Widget 내에서 최상단에 위치해있는 Widget이다. 설명하기전에 먼저 예시를 보여주자면, 가장 간단하게 구현해보았고, 흔히들 앱 내 페이지에서 많이들 쓰는 형태이다. return Scaffold( appBar: AppBar( title: Text("AppBar Test"), // 가운데 보여지는 제목 centerTitle: true, // true: 제목 가운데 정렬 여부 leading: IconButton( // leading: 상단 좌측 icon: Icon(Icons.arrow_back), onPressed: () {}, ), actions: [ // actions: 상단 우측 IconButton( icon: Icon(Icons.home), onPressed: () {}, ), ]..

앱을 Build해서 배포했을 때 기기마다 글자 크기가 다른 경우를 본 적 있을 것이다. 자체 설정에 있는 폰트 크기에 따라 내가 fontSize를 10으로 설정했든, 15로 설정했든 default 값은 휴대폰 설정에 글자 크기를 따라간다. 이를 해결하기 위해서는 Text에서 옵션을 하나만 추가해주면 된다. Text 위젯에는 textScaleFactor 라는 옵션이 있다. default 값은 휴대폰 설정에 따라 앱이 글자 크기를 나타낸다면 textScaleFactor 라는 옵션을 넣어주면 앱의 설정에 따라 글자 크기를 나타내준다. 아래 사진 두 장은 fontSize를 35로 지정하고 글꼴 크기 작게/크기를 비교한 사진이다. 예시로 저렇게 적었지만 실제 개발 과정에서 Container에서 제한적인 width..

SnackBar는 크게 content, duration, action 3개의 속성을 주로 쓴다. 그 외에 여러가지 속성들이 있지만 오늘은 이 3개 속성만을 사용하여 SnackBar를 구현해보도록 하자. content의 경우 상위 BuildContext에 있는 객체를 그대로 가져온다고 생각하면 된다. content는 실제 SnackBar의 내용이라고 생각하면 된다. Text만이 아니라 Widget 개념으로 되어 있기 때문에 Icon이나 Button 등도 구현이 가능하다. duration은 SnackBar가 노출되는 시간이다. action은 추가로 작업을 넣는다고 생각하면 된다. 위에 설명을 토대로 간단하게 구현해보았다. 저기에서 Duration을 주면 설정한 시간이 지난 뒤 자동으로 SnackBar는 사라..