Day 1 Challenge -Part 1 - Remaking 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:Day1HomePage())
    );
  }
}


class Tab{
  final Color c;
  final String url;
  final String title;
  final String subtitle;
  final String alt;
  final bool home;

  Tab({this.c, this.url, this.title, this.subtitle, this.alt, this.home=false});
}

List<Tab> tabs =[
  Tab(
    c:Color.fromRGBO(255, 195, 26, 1.0),
    url:"http://www.jonathanpatterson.com/images/prism-upright.png",
    title:"Home",
    subtitle: "Performant design for products and websites",
    home: true,
    alt:
'''
Welcome to
the portfolio of
Jonathan Patterson,
Detroit Product Designer
'''
    ),
  Tab(
    c:Color.fromRGBO(255,122,15, 1.0),
     url: "http://www.jonathanpatterson.com/images/grenade-in-tact.png",
     title:"About",
    subtitle: "Shattering the status quo"
   
      ),
  Tab(
    c:Color.fromRGBO(209,65,52, 1.0),
    url:"http://www.jonathanpatterson.com/images/prism-upright.png",
    title:"Portfolio",
    subtitle: "From website design to app UX/UI, It's all here"
  
    ),
  Tab(
    c:Color.fromRGBO(117,189,63, 1.0),
      url:"http://www.jonathanpatterson.com/images/globe-no-pins.png",
      title:"Clients",
    subtitle: "Performant design for products and websites"
  
    ),
  Tab(
    c:Color.fromRGBO(0,146,255, 1.0),
     url:"http://www.jonathanpatterson.com/images/energy-drink.png",
     title:"'Sup",
    subtitle: "What’s up, during and after hours."
   
    ),
  Tab(
    c:Color.fromRGBO(125,66,151, 1.0),
    url:"http://www.jonathanpatterson.com/images/curled-paper.png",
    title:"Contract",
    subtitle: "Ready to make something special? Me too!"
    ),
];


class Day1HomePage extends StatefulWidget {
  final Function(String) setScreen;

  const Day1HomePage({Key key, this.setScreen}) : super(key: key);
  @override
  _Day1HomePageState createState() => _Day1HomePageState();
}
class _Day1HomePageState extends State<Day1HomePage> {
  @override
  Widget build(BuildContext context) {
    return 
    
    
    Column(
      children: [
      Expanded(
        child: Row(
          children:
        List.generate(3, (int i)=>Expanded(
          child: OnHoverWidget(
            hoverWidget: (val)=>TabWidget(tab:tabs[i], setScreen: widget.setScreen, hover:val),
          ),
        )
      )

    ),
      ),
    Expanded(
      child: Row(
          children:
        List.generate(3, (int i)=>Expanded(
          child: OnHoverWidget(
          hoverWidget: (val)=>TabWidget(tab:tabs[i+3], setScreen: widget.setScreen, hover: val,)),
        ),
        ),
      ),
    )]);
  }
}


class TabWidget extends StatelessWidget {
   final bool hover;
  final Tab tab;
  final Function(String) setScreen;
  const TabWidget({Key key, this.tab, this.setScreen, this.hover}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  
    GestureDetector(
        onTap: (){
          if(tab.title=="Portfolio"){
            setScreen("Portfolio");
          }
        },
        child: AnimatedContainer(
           duration: const Duration(milliseconds: 200),
          height:double.infinity,
          color:(hover&& !tab.home) ?  Colors.grey[800]: tab.c,
          child: Stack(
            children:[
              Center(child: 
              tab.alt!=null? Padding(
                padding:  EdgeInsets.symmetric(horizontal:60.0),
                child: Text(tab.alt, textAlign: TextAlign.center, style: TextStyle(color:Colors.white, fontSize:26.0, fontWeight: FontWeight.bold),),
              ):
              AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        child: Image.network(tab.url),
        height: hover ? 300 : 200,
        width: hover ? 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(tab.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(tab.subtitle, textAlign: TextAlign.left, style: TextStyle(color:Colors.white, fontSize:14.0,),),
                        ],
                      ),
                    ),
                  )
                )
            ]
          ),
        ),
    );
  }
}


class OnHoverWidget extends StatefulWidget {
  final Function(bool) hoverWidget;

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

class _OnHoverWidgetState extends State<OnHoverWidget> {
  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: widget.hoverWidget(_hovering));
  }
}