본문 바로가기
반응형

[클라이언트]/[Flutter]71

[Flutter] Widget / 위젯 - 입력용 위젯 입력용 위젯 TextField 글자를 입력받는 위젯. inputDecoration 클래스와 함께 사용하면 힌트 메세지나 외곽선 등의 꾸밈 효과 추가 가능. body: Center( child: Column( children: [ // 기본 형태 TextField(), // 힌트 표현 TextField( decoration: InputDecoration( labelText: '여기에 입력하세요', ), ), // 외곽선 추가 TextField( decoration: InputDecoration( border: OutlineInputBorder(), // 외곽선 labelText: '여기에 입력하세요', ), ), ], ), ) CheckBox와 Switch 설정 화면 등에 많이 사용되는 체크박스, 라디오 .. 2021. 8. 21.
[Flutter] Widget / 위젯 - 화면 표시용 위젯 위젯 : 플러터의 UI를 구성하는 모든 요소. 화면 표시용 위젯 버튼과 더불어 화면 구성시 가장 자주 사용되는 위젯인 텍스트, 이미지, 아이콘, 프로그래스바 등 Text 글자를 표시하는 위젯 body: Center( child: Text( 'Hello World', style: TextStyle( fontSize: 40.0, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold, color: Colors.red, letterSpacing: 4.0 ), ), ) Text 클래스의 첫번째 인수(텍스트명)는 필수 프로퍼티로 이름 없는 인수이다. style 뿐만 아니라 모든 이름 있는 인수는 옵션 성격이므로 필요한 것을 선택적으로 사용할 수 있다. + Text 클.. 2021. 8. 15.
[Flutter] Widget / 위젯 - 버튼 계열 위젯 위젯 : 플러터의 UI를 구성하는 모든 요소. 버튼 계열 위젯 ElevatedButton 입체감을 가지는 일반적인 버튼 위젯 body: Center( child: ElevatedButton( child: Text('RaidsedButton'), onPressed: () {}, ), ) 버튼 위젯들은 모두 onPressed 프로퍼티에, 버튼이 클릭되었을 때 실행될 함수를 반드시 정의해줘야 버튼이 활성화되며 클릭 가능하다. 만약 null을 지정하면 버튼이 클릭되지 않는 비활성화 상태가 된다. TextButton 평평한 형태의 텍스트 버튼 body: Center( child: TextButton( child: Text('TextButton'), onPressed: () {}, ), ) IconButton 아이.. 2021. 8. 15.
[Flutter] Widget / 위젯 - 위치, 정렬, 크기를 위한 위젯 위젯 : 플러터의 UI를 구성하는 모든 요소. 위치, 정렬, 크기를 위한 위젯 위젯 중에는 위젯 크기나 위치, 정렬 등을 보조하는 위젯이 있다. Center 중앙으로 정렬시키는 위젯. 상당히 많이 사용됨. body: Center( child: Container( color: Colors.red, width: 100, height: 100, ), ) + 참고적으로, 내 예제에서 타이틀이 있다 없다 하는데 타이틀 부분이 없는건 Scaffold에서 appBar 프로퍼티나 body 프로퍼티 사용 안하고 전체 다 사용하게 되었을 때 그런다. Padding 안쪽 여백을 표현할 때 사용하는 위젯. body: Padding( padding: const EdgeInsets.all(40.0), child: Containe.. 2021. 8. 15.
반응형