Flutter with FLUS_W7

• AlertDialog

  • 하단 이미지와 같이 관련 내용과 버튼을 포함한 팝업형식으로 나타난다.

  • 선호하는 디자인을 고려하자.

  • Android 머티리얼이면 AlerDialog

    

    • 상단에 제목과 주요내용이 들어간다.

      AlertDialog(
      	title: Text("Accept?"),
      	content: Text("Do you accept?"),
      	actions:[
      		FlatButton("No"),
      		FlatButton("Yes",
      	],
      );

      • content에 경우 텍스트 형태지만 움직이는 이미지나 예) content: Image(”image.gif”), 다른 형태도 가능하다. 예) content: MyFancyWidget(),
      • elevation, backgroundColor 등 추가 속성을 선언할 수 있다.

        AlertDialog(
        	title: Text("Accept?"),
        	content: Text("Do you accept?"),
        	actions:[
        		FlatButton("No"),
        		FlatButton("Yes",
        	],
        	elevation: 24.0,
        	backgroundColor: Colors.blue,
        );

        
      • shape: CircleBorder(), 를 추가한 경우

  • iOS이면 CupertinoAlertDialog를 사용한다.

    

    • 상단에 제목과 주요내용이 들어간다.

      CupertinoAlertDialog(
      	title: Text("Accept?"),
      	content: Text("Do you accept?"),
      	actions:[
      		CupertinoDialogAction("No"),
      		CupertinoDialogAction("Yes",
      	],
      );

      • content에 경우 텍스트 형태지만 움직이는 이미지나 예) content: Image(”image.gif”), 다른 형태도 가능하다. 예) content: MyFancyWidget(),

  • showDialog()

    • CupertinoAlertDialog와 AlertDialog는 각각 하단 이미지와 같이 달리 연결되어 있다.

      

    • showDialog는 context와 builder를 사용해 나타내고 싶은 특정 내용을 보여준다.

      showDialog(
      	context: context,
      	builder: (_) => AlerDialog(),
      	barrierDismissible: false
      );

      barrierDismissible: false 는 Outside tap에 대한 것이다.
      

  • switch toggle에 따른 AlertDialog 혹은 CupertinoDialog 표시