app

import 'package:flutter/material.dart';
import 'package:cards/payment_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cards UI',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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


class Atributes{
  final Color colorgrad;
  final Color colorgrad2;
  Atributes(this.colorgrad,this.colorgrad2);
}






class _MyHomePageState extends State<MyHomePage> {

  final List<Atributes> atributelist=[
    Atributes(Colors.purple,Colors.blue),
    Atributes(Colors.black,Colors.yellow),
    Atributes(Colors.green,Colors.yellow),
    Atributes(Colors.red,Colors.red),

  ];

 final cardtext = new Container(
    padding: EdgeInsets.only(top: 110,left: 35,bottom: 0),
    child:(
    Text('Bank Cards', style: TextStyle(fontSize: 34, fontWeight: FontWeight.bold,color: Colors.white),))

  );


final profileimage = new Container(
    padding: EdgeInsets.only(top: 110,right: 35),
    child: (
      CircleAvatar(
        radius: 22.0,
        backgroundImage: NetworkImage('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-mclaren-720s-mmp-1-1570642764.jpg?crop=0.577xw:0.789xh;0.337xw,0.158xh&resize=640:*'),)

    ),
  );


final balancetext = new Container(
  padding: EdgeInsets.only(left: 20,bottom: 20,top: 35),
  child:(
    ListTile(
      title: Text('Balance',style: TextStyle(fontSize: 14,fontWeight: FontWeight.normal,color: Colors.grey),textAlign: TextAlign.left,),
      subtitle: Text('RON 3969.35',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold,color: Colors.white),textAlign: TextAlign.left,),

    )
  ),
);


 String link1='https://i.imgur.com/h2cmNtk.png?1';
/*
  Widget cardscrolling(BuildContext context,int index){


      return new Container(
    margin: EdgeInsets.symmetric(vertical: 10.0),
    padding: EdgeInsets.only(left: 20,right: 20),

          height: 400,

          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              new GestureDetector(
                //splashColor: Colors.green,
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) =>
                     PaymentScreenView()
                  ));

                },
                child: (
                  Container(
                height: 400,
                width: 225,
                margin: EdgeInsets.only(right: 20,left: 20),
                decoration: BoxDecoration(
                  borderRadius: new BorderRadius.all(const Radius.circular(10)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [atribute.colorgrad,Colors.lightBlueAccent,atribute.colorgrad2]
                  )
                ),
                child: (
                  Image(
                  image: NetworkImage(link1),
                )
              ),
              )
                ),
              ),
              GestureDetector(
                              child: Container(
                  height: 400,
                  width: 225,
                  margin: EdgeInsets.only(right: 20,left: 20),
                  decoration: BoxDecoration(
                    borderRadius: new BorderRadius.all(const Radius.circular(10)),
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [Colors.grey[900],Colors.limeAccent,Colors.lime]
                    )
                  ),
                  child: (
                    Image(
                    image: NetworkImage(link1),
                  )
                ),
                ),
              ),
              Container(
                height: 400,
                width: 225,
                margin: EdgeInsets.only(right: 20,left: 20),
                decoration: BoxDecoration(
                  borderRadius: new BorderRadius.all(const Radius.circular(10)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.green,Colors.yellow]
                  )
                ),
                child: (
                  Image(
                  image: NetworkImage(link1),

                )
                ),

              ),
              Container(
                height: 400,
                width: 225,
                margin: EdgeInsets.only(right: 20,left: 20),
                decoration: BoxDecoration(
                  borderRadius: new BorderRadius.all(const Radius.circular(10)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.orange,Colors.red]
                  )
                ),
                child: (
                  Image(
                  image: NetworkImage(link1),
                )
              ),
              ),
              cardimage(context),
            ],
          ),
        );

  }
  */
Widget cardimage(BuildContext context){
  return
  GestureDetector(
    onTap: (){
      Navigator.push(context, MaterialPageRoute(builder: (context) =>
                     PaymentScreenView()
                  ));
      },
      child:(
        Container(
                height: 400,
                width: 225,
                margin: EdgeInsets.only(right: 20,left: 20),
                decoration: BoxDecoration(
                  borderRadius: new BorderRadius.all(const Radius.circular(10)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.pink,Colors.grey]
                  )
                ),
                child: (
                  Image(
                  image: NetworkImage(link1),
                )
              ),
              )
      )
  );
}

Widget buildCardScroll(BuildContext context, int index){

    final atribute=atributelist[index];

    return  Container(
    margin: EdgeInsets.symmetric(vertical: 10.0),
    padding: EdgeInsets.only(left: 20,right: 20),

          height: 400,

          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[


              new GestureDetector(
                  onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) =>
                     PaymentScreenView()
                  ));

                },
                child: (
                  Container(
                height: 400,
                width: 225,
                margin: EdgeInsets.only(right: 20,left: 20),
                decoration: BoxDecoration(
                  borderRadius: new BorderRadius.all(const Radius.circular(10)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [atribute.colorgrad,atribute.colorgrad2]
                  )
                ),
                child: (
                  Image(
                  image: NetworkImage(link1),
                )
              ),
              )
                ),
              ),

            ],
          )
    );


}

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(
              child: Column(
              children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                          cardtext,
                          profileimage
                    ],
                  ),
                  balancetext,
                  //for(int inde=0;inde<=1;inde++)

                  //INITIAL CARD SCROLL
                    //buildCardScroll(context,0)
                  Container(
    margin: EdgeInsets.symmetric(vertical: 10.0),
    padding: EdgeInsets.only(left: 20,right: 20),

          height: 400,

            child:
          ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: atributelist.length,
            itemBuilder: (BuildContext context,int index)=> buildCardScroll(context,index),
          )
    )
                ],
              )
            ),
          )
        ],
      )
    );
  }
}