import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ISP Yolo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'ISP Yolo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            SingleChildScrollView(
              physics: BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        IconButton(icon: Icon(Icons.clear, size: 35,), onPressed: (){})
                      ],
                    ),
                  ),
                  Stack(
                    children: <Widget>[
                      Container(
                        width: double.infinity,
                        margin: EdgeInsets.only(left: 20, right: 20, top: 50, bottom: 20),
                        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 50),
                        decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(10)
                        ),
                        child: Column(
                          children: <Widget>[
                            Text("Proteggi la tua passione per gli sport sulla neve!", textAlign: TextAlign.center, style: TextStyle(fontSize: 24, color: Colors.blue),),
                            SizedBox(height: 20,),
                            Text(
                              "La stagione invernale entra nel vivo. Divertiti senza pensieri sulla neve insieme alla tua famiglia e ai tuoi amici. Scopri come proteggerti con Yolo da sito e app in pochi clic.",
                              textAlign: TextAlign.center,
                              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w300),
                            )
                          ],
                        ),
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Image(image: AssetImage("images/umbrella.png"), height: 100, width: 100,)
                      ),
                    ],
                  ),
                  Text("Attività per cui sono protetto", textAlign: TextAlign.center, style: TextStyle(fontSize: 20),),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Card(title: "Sci", image: "ic_sci.png"),
                            SizedBox(width: 10,),
                            Card(title: "Snowboard", image: "ic_snowboard.png")
                          ],
                        ),
                        SizedBox(height: 10,),
                        Row(
                          children: <Widget>[
                            Card(title: "Pattinaggio", image: "ic_pattini.png"),
                            SizedBox(width: 10,),
                            Card(title: "Ciaspole", image: "ic_ciaspole.png")
                          ],
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(30),
                    child: Text(
                      "YOLO è un broker assicurativo partner di Intesa Sanpaolo specializzato nella proposizione di soluzioni assicurative in modalità digitale.",
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 12),
                    ),
                  )
                ],
              ),
            ),

            Align(
              alignment: Alignment.bottomCenter,
              child: MaterialButton(
                onPressed: (){},
                shape: StadiumBorder(),
                color: Colors.green[700],
                child: Text("SCOPRI YOLO", style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700),),
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
              ),
            )
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class Card extends StatelessWidget {

  String title;
  String image;

  Card({this.title, this.image});

  @override
  Widget build(BuildContext context) {
    return Flexible(
      fit: FlexFit.loose,
      child: Container(
        height: 80,
        padding: EdgeInsets.all(0),
        decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.circular(10)
        ),
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(title, style: TextStyle(color: Colors.blue),),
            ),
            Image(image: AssetImage("images/" + image), height: 80, width: 60, fit: BoxFit.cover, alignment: Alignment.topLeft,)
          ],
        ),
      ),
    );
  }
}