[Flutter] 플러터 기초 (5) - cupertino ui button, material ui button

 

 

[Flutter] 플러터 기초 (5) - cupertino ui button, material ui button

 

 

Flutter 플러터 기초 (5) - cupertino ui button, material ui button

 

 

 

이모티콘・01・고양이 마멋 친구들 - Google Play 앱

 

 

안녕하세요 정보처리마법사 입니다.

 

이번 포스팅의 주제는  쿠퍼티노 버튼 머테리얼 버튼에 관한 내용입니다.

 

 쿠퍼티노 디자인은 iOS, 머테리얼 디자인은 Android라고 생각하시면 됩니다.

 

새 플러터 프로젝트를 만들어줍니다.

 

 

새 다트파일을 하나 만들어줍니다.

 

 

파일명은 cupertino_page로 할게요.

 

 

 

 

 

 

material.dart, cupertino.dart를 import 해주시고 스샷과 같이 StatefulWidget 을 상속받은 CupertinoPage 위젯을 하나 만들어줍니다. 그리고 안쪽에 Scaffold 위젯을 리턴하게 합니다. Scaffold 위젯 안쪽엔 appBar를 CupertinoNavigationBar를 이용해 하나 만들어줬고, body는 Column 위젯을 하나 만들어 CupertinoButton 과 RaisedButton 을 만들어줬습니다. 기능은 넣지 않았습니다.

 

 

main.dart로 가서 방금 새로 만든 cupertino_page.dart를 import하고, 처음 프로젝트 만들때 자동으로 생성된 소스코드중에 home 부분만 살짝 변경해줍니다.

 

 

잘 되네요 😁

 

 

이상으로 포스팅을 마칩니다. 감사합니다.

 

 

main.dart는 위쪽 스샷처럼 한 줄만 변경하면 되므로 따로 소스코드를

첨부하진 않겠습니다.

 

cupertino_page.dart 

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
 
class CupertinoPage extends StatefulWidget {
  @override
  _CupertinoPageState createState() => _CupertinoPageState();
}
 
class _CupertinoPageState extends State<CupertinoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('Cupertino Style UI',style: TextStyle(color: Colors.blue),),
      ),
      body: Column(
        children: <Widget>[
          CupertinoButton(
            child: Text('Cupertino Button',style: TextStyle(color: Colors.pink),),
          ),
          RaisedButton(
            child: Text('Material Button',style: TextStyle(color: Colors.teal),),
          )
        ],
      ),
    );
  }
}

Ctrl + C ,   Ctrl + V 

 

 

 

 

 

 

 

이상으로 포스팅을 마칩니다. 감사합니다.

 

 

 

 

잘 못 된 정보가 있으면 말씀해주세요.

공감버튼 클릭은 작성자에게 큰 힘이 됩니다.  행복한 하루 되세요.

 

“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"