[Flutter] Buttons

✅ ButtonStyle

---

1. RaisedButton ➡ ElevatedButton

RaisedButton은 ElevatedButton으로 변경되면서 글씨색과 배경색을 주는 방법이 바뀌었다.

    // Flutter2 부터는 ElevatedButton이 사용되지만 원래의 코드를 위해서 잠시 사용
      child:  RaisedButton(
        color: Colors.orangeAccent,
        textColor: Colors.white,
        child: Text(answerText),
        onPressed: selectHandler,
      ),
    );
  }
}


//변경 후 두가지 방법
      child: ElevatedButton(
        //1️⃣ style: ButtonStyle(
        //   backgroundColor: MaterialStateProperty.all(Colors.lightGreen),
        //   foregroundColor: MaterialStateProperty.all(Colors.white),
        // )
       2️⃣ style: ElevatedButton.styleFrom(
            primary: Colors.blue, onPrimary: Colors.white),

2. FlatButton ➡TextButton

 

flatButton은 배경색이 존재하지 않기 때문에 primary만 지정해 준다. 

 FlatButton(
            child: Text('Restart Quiz!'),
            textColor: Colors.orangeAccent,
            onPressed: resetHandler,
            
            
 TextButton( //배경색이 없는 텍스트 버튼
            child: Text('Restart Quiz!'),
            style: TextButton.styleFrom(primary: Colors.orange),
            onPressed: resetHandler,
          ),

3. OutlineButton ➡ OutlinedButton

OutlineButton(
          borderSide: BorderSide(color: Colors.blue),
          textColor: Colors.blue,
          child: Text('An Outline Button'),
          onPressed: () {
            print('Pressed outline button');
          },
        ),
          
          
 OutlinedButton(
 		style: OutlinedButton.styleFrom(
 		primary: Colors.orange, side: BorderSide(color: Colors.orange),
        ),
        child: Text('An Outline Button'),
        onPressed: () {
            print('Pressed outline button');
          },
        ),