2023. 12. 17. 00:47ㆍ언어/flutter
home: Image.asset('human.png') //assets/human 으로 써야지 맞긴함
home: Icon
lp 라는 단위임 1.2센치
child: Scaffold(
appBar: AppBar(),
body: Container(),
bottomNavigationBar: BottomAppBar(),
어플의 상중하
home:Scaffold(
body: Row(
children: const[
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star)
],
가로 배치
새로배치는 body:Column 을 적으면됨
mainAxisAlignment: MainAxisAlignment.center,
이걸적으면 중간정렬(별3개가 중간에 뜸)
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
이걸적으면 별이 뛰엄뛰엄 나옴 3개다
home:Scaffold(
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const[
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star)
],
),
)
);
MaterialApp(
home: Scaffold(
appBar: 상단에 넣을 위젯,
body: 중단에 넣을 위젯,
bottomNavigationBar: 하단에 넣을 위젯,
)
);
Scaffold() 위젯은 상중하 로 나눠준다 . 위에 처럼 하나하나 만들어줘도 되고 ( 중간은 필수로 적어야지 No오류 )
위에 내용을 토대로
child 부분에서 크기를 키우고 싶은데 안키워지면 전체 sizebox를 넣어서 크기를 조정할 수 있게 만들어줘야 됨
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('앱임')),
body: Text('안녕'),
bottomNavigationBar: BottomAppBar(
child: SizedBox(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.phone),
Icon(Icons.message),
Icon(Icons.contact_phone_sharp),
],
),
)
margin: EdgeInsets.all(20),
이렇게 컨테이너 - 바디 - 안에 마진을 전부다 줄 수 있다. 만약 개별로 주고 싶다면?
margin: EdgeInsets.fromLTRB(0,30,0,0),
안에 데코를 넣고 싶을떄는
decoration: BoxDecoration(
),
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('앱임'),),
body: Container(
width: 150, height: 50,
decoration: BoxDecoration(
border: Border.all(color: Colors.black)
이런식으로 색이나 꾸밀때 이용
home: Scaffold(
appBar: AppBar(title: Text('앱임'),),
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 150, height: 50, color: Colors.blue,
하단 중앙 정렬 align (중앙( bottomCenter 하단) )
width: double.infinity
부모 박스를 넘어가지 않는 선에서 무한 으로
이런식으로 무한으로
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('앱임'),),
body: Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.all(20),
width: double.infinity, height: 50, color: Colors.blue,
),
박스에 마진을 줘서 위에 둘을 응용도 가능
'언어 > flutter' 카테고리의 다른 글
3. 플러터 와 피그마 (1) | 2023.12.18 |
---|---|
2. (플러터 파이어 베이스 서버 ) firebase 시작 (1) | 2023.12.18 |
2. flutter (0) | 2023.12.17 |
1. (플러터 파이어 베이스 서버 ) node.js 다운로드 및 기초 공부 (0) | 2023.12.14 |