Flutter - Button 만들기 (RaisedButton, FlatButton, IconButton, FloatingActionButton, CustomButton) [6]

 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Text('MainPage'),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            RaisedButton(
              child: Icon(Icons.add),
              onPressed: () {},
            ),
            FlatButton(
              onPressed: () {},
              child: Icon(Icons.add),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.add),
            ),
            FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.add),
            ),
            _MyButton(),
          ],
        ),
      ),
    );
  }
}

class _MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<_MyButton> {
  bool _active = false;

  _setActive() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('onTap');
        _setActive();
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: _active ? Colors.red : Colors.black,
            width: 2,
          ),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        width: 300,
        height: 80,
        alignment: Alignment.center,
        child: Icon(Icons.add),
      ),
    );
  }
}

MainPage

​ : Row로 여러 버튼을 만든다.

​ RaisedButton: 일반적인 버튼이다. child로 내부에 들어갈 Widget을 지정하고 onPressed로 이벤트를 설정한다.

​ FlatButton: 내부Widget이 보이다 버튼을 누르면 animation이 나온다. child로 내부에 들어갈 Widget을 지정하고 onPressed로 이벤트를 설정한다.

​ IconButton: FlatButton 과 유사하지만 눌렀을때 모습이 동그랗다. child로 내부에 들어갈 Widget을 지정하고 onPressed로 이벤트를 설정한다.

​ FloatingActionButton: FloatingButton 형식이다. child로 내부에 들어갈 Widget을 지정하고 onPressed로 이벤트를 설정한다.

​ _MyButton: 커스텀하게 구현한 Button이다.

​ _MyButton extends StatefulWidget: StatefulWidget을 만든다.

​ _MyButtonState: 실제 Button의 Widget을 구현한다.

​ _active: 현재상태를 나타낸다.

​ _setActive: 호출할 때 마다 _active의 상태를 바꾼다.(true -> false, false -> true)

​ GestureDetector: onTap을 통해 tap이벤트를 지정할 수 있다.

​ color: _active에 따라 색을 선택한다. (true = red, false = black)