flutter - button/ icon /

버튼 또는 아이콘을 설정해보자

 

1. 아이콘만 넣기

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {// return Widget
    return  Scaffold( //wrapper for some widgets
      appBar: AppBar( // property : widget (value) 이런식으로 작성해야함
        title: Text('my  first app'),
        centerTitle: true,
        backgroundColor: Colors.red[600],
      ),
      body: Center(
         child: Icon(
           Icons.airport_shuttle,
           color:Colors.lightBlue,
           size:50/0,
         ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('click'),
        backgroundColor: Colors.red[600],
      ),
    );
  }
}

 

공항버스같은 아이콘에 색상과 크기를 설정할 수 있다.

 

2. 버튼 만들기

버튼을 만들고 싶다면  아이콘 대신에 아래와 같은 버튼을 설정해준다.

RaisedButton 을 이용하면 그림자가 지고, FlatButton은 말그대로 납작한 버튼이다.

그리고 눌렀을 때 콘솔에 'you clicked me'가 뜨도록 다음과 같은 함수가 들어간다.

 body: Center(
         child: RaisedButton( // or FlatButton
           onPressed: () {
             //function inserted
             print('you clicked me');
           },
           child: Text('click me'),
           color: Colors.lightBlue,
         ),
       
      ),

3. 아이콘과 버튼 같이 만들기

  body: Center(
         child: RaisedButton.icon(
           onPressed: (){},
           icon:Icon(
             Icons.mail
           ),
           color:Colors.amber,
           label: Text('mail me'),
         ),
      ),

아이콘에 원하는 모양의 아이콘을 넣고, label에 표시할 글자를 입력하면 된다.

 

4. 아이콘을 버튼처럼 사용하기

body: Center(
         child:IconButton(
           onPressed: (){
             print('you clicked me');
           },
           icon: Icon(Icons.alternate_email),
           color: Colors.amber
         ),
      ),

IconButton 위젯을 사용하면 아이콘 모양이지만 누를 수 있게된다.

누르면 콘솔창에 you clicked  me가 뜨는 것을 확인할 수 있다.