Design using code

November 16, 2020

Design using code

Design

Load assets in pubspec.yaml


  assets:

- assets/boy.png

 - assets/girl.png

`Now you can write coding in main.dart file`

First find which widget should be use for this type of design. We are using

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(

    body: YourDesign(),

      ),

    );
  }
}
class YourDesign extends StatefulWidget {
  @override
  _YourDesignState createState() => _YourDesignState();
}

class _YourDesignState extends State<YourDesign> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Column(
   crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.spaceAround,
           children: [ Container(
            height: 80,
            width: 80,

            decoration: BoxDecoration(shape: BoxShape.circle,
          image: DecorationImage(image:AssetImage("assets/girl.png"),),),
          ),
       
        Container(
          height: 80,
          width: 50,
          
          child:  Center(child:   Text("VS",
          style: TextStyle(color: Colors.blue,fontSize: 18,
          fontWeight: FontWeight.bold),)
          ,),
          ),
        
          Container(
            height: 80,
            width: 80,

            decoration: BoxDecoration(shape: BoxShape.circle,
          image: DecorationImage(image:AssetImage("assets/boy.png"),
          ),),
          ),],
         ),
           Row( crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: [
                RaisedButton(
                  color: Colors.red[900],
                  
                  onPressed: (){},child:Text("Decline"
                  ,style: TextStyle(color:Colors.white,fontSize: 16),),
                  shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(20),
),
),
   RaisedButton(
     color: Colors.blue[900],
     onPressed: (){},child:Text("Accept"
     ,style: TextStyle(color:Colors.white,fontSize:16),),
     shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(20),
     )
     ,)

             ],
           ),

      ],),
      
    );
  }
}