import 'package:flutter/material.dart';

class Welcome extends StatefulWidget {
  @override
  _WelcomeState createState() => _WelcomeState();
}

class _WelcomeState extends State<Welcome> {
  String dropdownValue = 'English';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/welcome.png'),
              fit: BoxFit.cover),
        ),
        child: Center(
          child: Padding(
            padding: const EdgeInsets.only(bottom: 70),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.only(bottom: 20),
                  child: Text(
                    "Let's Start",
                    style: TextStyle(
                        fontFamily: 'MontHeavy',
                        color: Colors.white,
                        fontSize: 40,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                Text(
                  "Select language",
                  style: TextStyle(
                      fontFamily: 'MontExtraLight', color: Colors.white),
                ),
                Container(
                  width: 120,
                  height: 50,
                  decoration:
                      BoxDecoration(border: Border.all(color: Colors.white)),
                  child: Theme(
                    data: Theme.of(context).copyWith(
                      canvasColor: Colors.black,
                    ),
                    child: DropdownButtonFormField<String>(
                      isExpanded: true,
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.white),
                              borderRadius: BorderRadius.circular(1))),
                      value: dropdownValue,
                      itemHeight: 50,
                      icon: const Icon(
                        Icons.arrow_drop_down_sharp,
                        color: Colors.white,
                        size: 20,
                      ),
                      iconSize: 24,
                      elevation: 16,
                      style: const TextStyle(
                          height: 0.5,
                          color: Colors.white,
                          fontFamily: 'MontExtraLight',
                          fontSize: 15),
                      onChanged: (String newValue) {
                        setState(() {
                          dropdownValue = newValue;
                          Navigator.pushReplacementNamed(context, '/roles');
                        });
                      },
                      items: <String>['English', 'Français']
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}