* Text
- 문자열을 지정하여 Text('글자') 형태로 사용
- style 프로퍼티에 TextStyle 클래스의 인스턴스를 지정
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text"),
),
body: Center(
child: Text(
'Hello, World! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
)
),
);
}
}
* Image
- 이미지를 표시하는 위젯
- 네트워크에 있는 이미지 표시
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Image"),
),
body: Center(
child: Image.network('http://bit.ly/2Pvz4t8')
),
);
}
}
* Icon
- 아이콘 표시에 사용되는 위젯
- 단독으로도 사용하지만 메뉴나 리스트, 버튼과의 조합으로 사용
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Icon"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const <Widget>[
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
Icon(
Icons.beach_access,
color: Colors.blue,
size: 36.0,
),
],
)
);
}
}
* Progress
- 로딩 중이거나 오래 걸리는 자겅ㅂㅂ을 할 때 사용자에게 진행 중임을 보여주는 용도로 사용하는 위젯.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Progress"),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
'Linear progress indicator with a fixed color',
style: Theme.of(context).textTheme.headline6,
),
CircularProgressIndicator(
),
LinearProgressIndicator(),
],
),
),
);
}
}