[Flutter] 플러터 위젯 정리

플러터 위젯 정리

• stless
• MyApp()
• MaterialApp();
  • debugShowCheckedModeBanner: false
  • title: ‘App Name’
  • theme: ThemeData(primarySwatch: Colors.blue)
  • home: MyHomePage()
  • 글자 위젯
    • Text()
      • style: TextStyle(fontWeight: FontWeight.w700)

• • 아이콘 위젯
    • Icon(Icons.아이콘이름)
      • color, size
  • 이미지 위젯
    • assets 폴더 만들기
    • Image.asset(’assets/파일명.jpg’) # pubspec에 등록하기(flutter: 밑에)
  • 박스 위젯
    • Container()
    • SizedBox()
      • width: 50, height: 50, Color: colors.blue
  • 버튼 위젯
    • TextButton()
      • child: Text(’’)
      • onPressed: (){}
    • IconButton()
      • icon: Icon(Icons.star)
      • onPressed: (){}
    • ElevatedButton()
      • child: Text(’’)
      • onPressed: (){}
  • Divider(height:)
  • CircleAvatar()
  • Center()
  • Align(alignment: Alignment.bottomCenter)
    • child: Container(width: 50, height: 50, color: Colors.blue)
  • Container()
    • width: double.infinity
    • height: 50
    • margin: EdgeInsets.all() // 바깥 여백
      • margin: EdgeInsets.fromLTRB()
        • LTRB: 왼쪽부터 시계방향
    • padding: EdgeInsets.all() // 안쪽 여백
      • padding: EdgeInsets.fromLTRB()
        • LTRB: 왼쪽부터 시계방향
    • decoration: BoxDecoration()
  • MaterialApp(): 머테리얼 테마(구글 스타일)
  • Scaffold(): 앱을 상, 중, 하로 나누어주는 레이아웃
    • appBar: AppBar()
      • title: Text()
      • centerTitle: false
      • leading: Icon(Icons.star)
      • actions: [우측 아이콘 1, 우측 아이콘 2, …]
    • body: Container()
    • bottomNavigationBar: BottomAppBar()
      • Row()
        • children: []
  • Row(children: [위젯1, 위젯2, 위젯3, …])
    • mainAxisAlignment: MainAxisAlignment.center
    • crossAxisAlignment: CrossAxisAlignment.center
  • Column(children: [위젯1, 위젯2, 위젯3, …])
    • mainAxisAlignment: MainAxisAlignment.center
    • crossAxisAlignment
  • Flexible()