Flutter - 유용한 위젯

Flutter의 가장 큰 장점은 Widget을 이용한 UI 디자인이라고 생각한다. 아래 Widget들은 유용하게 사용할 수 있는 Flutter Widget이다.

---

Drawer

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),

          // Drawer
          drawer: Drawer(
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(
                  accountName: const Text("Flutter"),
                  accountEmail: const Text("abcd@flutter.com"),
                  currentAccountPicture: const CircleAvatar(
                      backgroundImage: AssetImage("assets/profile.jpg")),
                  onDetailsPressed: () {},
                ),
                ListTile(
                  leading: const Icon(Icons.account_balance),
                  title: const Text("Account"),
                  onTap: () {},
                  trailing: const Icon(Icons.add),
                )
              ],
            ),
          )),
    );
  }
}

 

결과 화면:

---

SnackBar

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MySnackBar(),
        bottomNavigationBar: ...
      ),
    );
  }
}

class MySnackBar extends StatelessWidget {
  const MySnackBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text("Show Snackbar"),
        onPressed: () {
          Scaffold.of(context)
              .showSnackBar(const SnackBar(content: Text("It's a snackBar")));
        },
      ),
    );
  }
}

 

결과화면:

 

---

Form + TextField

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController controller1 = TextEditingController();
  // controller1.text -> 입력한 내용
  TextEditingController controller2 = TextEditingController();
  // controller2.text -> 입력한 내용

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(  // 키보드와 겹치도록
          child: Container(
            padding: EdgeInsets.all(50.0),
            child: Column(
              children: [
                TextField(
                  controller: controller1,
                  decoration: InputDecoration(labelText: "Enter Email:"),
                  keyboardType: TextInputType.emailAddress,
                ),
                TextField(
                  controller: controller2,
                  decoration: InputDecoration(labelText: "Enter Password:"),
                  keyboardType: TextInputType.text,
                  obscureText: true,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

코드 참고: github.com/icodingchef/login_dice-master (Coding Chef )

결과 화면:

---

Card

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 7.0,
          child: const ListTile(
            title: Text('큰 제목'),
            subtitle: Text('작은 제목'),
            leading: Icon(Icons.restaurant_menu),
          ),
        ),
      ),
    );
  }
}

 

결과 화면:

---

ListView (세로)

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: const <Widget>[
            CardBox(), // Customed Widget
            CardBox(),
            CardBox(),
            CardBox(),
            CardBox(),
            CardBox(),
            CardBox(),
            CardBox(),
          ],
        ),
      ),
    );
  }
}

 

결과 화면:

---

ListView (가로)

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,  // 가로 정렬
            children: const <Widget>[
              CardBox(),  // Customed Widget
              CardBox(),
              CardBox(),
              CardBox(),
              CardBox(),
              CardBox(),
              CardBox(),
              CardBox(),
            ],
          ),
        ),
      ),
    );
  }
}

 

결과 화면:

---

GridView

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: GridView.count(
          padding: const EdgeInsets.all(3.0),
          primary: false,
          crossAxisSpacing: 5,
          mainAxisSpacing: 5,
          crossAxisCount: 3,
          children: imgList, // List <Image>[ ... ]
        ));
  }
}

 

결과 화면:

---

Carousel Slider

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

 

main.dart

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class ImgSlide extends StatelessWidget {
  const ImgSlide({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Center(
          child: CarouselSlider(
        items: children: [ ... ]
        options: CarouselOptions(
          height: MediaQuery.of(context).size.width * 0.87,
          autoPlay: true,
          autoPlayInterval: const Duration(seconds: 3),
          autoPlayCurve: Curves.fastOutSlowIn,
          enlargeCenterPage: true,
          pauseAutoPlayOnTouch: true,
          aspectRatio: 2.0,
        ),
      )),
    );
  }
}

 

결과 화면: