1. flutter

2023. 12. 17. 00:47언어/flutter

728x90

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,
      ),

박스에 마진을 줘서 위에 둘을 응용도 가능 

728x90