Day 1 Hover Widget - based off home page of http://www.jonathanpatterson.com/

main.dart

import 'package:flutter/material.dart';
// Remaking http://www.jonathanpatterson.com/ home page in flutter
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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:  Scaffold(
    
      body:Center(
        child:Container(
        height:400.0,
        width:300.0,
         child: OnHoverWidget()
          ),
      
      ))
    );
  }
}


class OnHoverWidget extends StatefulWidget {

  const OnHoverWidget({Key key,}) : super(key: key);
  @override 
  _OnHoverWidgetState createState() => _OnHoverWidgetState();
}

class _OnHoverWidgetState extends State<OnHoverWidget> {
  
  
  Color backgroundColor = Color.fromRGBO(0,146,255, 1.0);
   String url= "http://www.jonathanpatterson.com/images/energy-drink.png";
   String title="'Sup";
   String subtitle= "What’s up, during and after hours.";
  bool _hovering = false;
   void _mouseEnter(bool hover) {
    setState(() {
      _hovering = hover;
    
    });
  }

  @override
  Widget build(BuildContext context) {
    return  
      MouseRegion(
            onEnter: (e) => _mouseEnter(true),
            onExit: (e) => _mouseEnter(false),
            child: 
 AnimatedContainer(
           duration: const Duration(milliseconds: 200),
          height:double.infinity,
          color:_hovering ?  Colors.grey[800]: backgroundColor,
          child: Stack(
            children:[
              Center(child:  AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        child: Image.network(url),
        height: _hovering? 300 : 200,
        width: _hovering? 300 : 200,
      ),
              ),
                Align(
                  alignment:Alignment.bottomCenter,
                  child:Padding(
                    padding: EdgeInsets.symmetric(horizontal:20.0, vertical: 30.0),
                    child: Container(
                      width: double.infinity,
                      height: 80.0,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Text(title, textAlign: TextAlign.left, style: TextStyle(color:Colors.white, fontSize:16.0, fontWeight: FontWeight.bold),),
                          Container(
                            height: 6.0,
                            child: Row(children: [
                              Container(height:6,
                              width:6, color:Colors.white),
                              Expanded(
                                child: Center(
                                  child: Container(height:1.5,
                                  width: double.infinity,
                                   color:Colors.white),
                                ),
                              ),
                            ],),
                          ),
                           Text(subtitle, textAlign: TextAlign.left, style: TextStyle(color:Colors.white, fontSize:14.0,),),
                        ],
                      ),
                    ),
                  )
                )
            ]
          ),
    
    ));
  }
}