[FLUTTER] Theme 클래스 : 다크 테마 설정하기

■ Theme 클래스를 사용해 다크 테마를 설정하는 방법을 보여준다.

 

▶ main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  DateTime _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Run'),
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: () {
                Future<DateTime> future = showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2018),
                  lastDate: DateTime(2030),
                  builder: (BuildContext context, Widget child) {
                    return Theme(
                      data: ThemeData.dark(),
                      child: child,
                    );
                  },
                );

                future.then((date) {
                  setState(() {
                    _selectedDate = date;
                  });
                });
              },
            ),
            Text(
              '결과 : $_selectedDate',
            ),
          ],
        ),
      ),
    );
  }
}