Flutter - Buttons, Containers, TextFields

// Container with BorderRadius circular and border, and antoher container inside

Container(
  width: 60,
  height: 60,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30.0),
    border: Border.all(color: Colors.blueAccent, width: 4),
    color: kLightGrey,
  ),
  child: Center(
    child: Container(
      width: 20,
      height: 20,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30.0),
        color: kGrey,
      ),
    ),
  ),
)
/*
Individuals border radius

 borderRadius: new BorderRadius.only(
   topLeft: const Radius.circular(40.0),
   topRight: const Radius.circular(40.0),
)*/

 

TextField(
      controller: controller,
      obscureText: obscureText,
      onChanged: onChanged,
      cursorColor: kWhite,
      style: TextStyle(color: kWhite, fontSize: 16),
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          borderSide: BorderSide(color: kGrey),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          borderSide: BorderSide(color: kGrey),
        ),
        labelStyle: TextStyle(
          color: kWhite,
        ),
        labelText: label,
      ),
    );

// Button with border and borderRadius

RawMaterialButton(
	shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
        side: BorderSide(color: kWhite, width: 1),
    )
)

 

// Botton with gradient background

BoxDecoration boxDecoration = BoxDecoration(
      borderRadius: BorderRadius.circular(15.0),
      gradient: LinearGradient(
        begin: Alignment.bottomLeft,
        end: Alignment.topRight,
        colors: <Color>[
          Color(0xFFC956EF),
          Color(0xFFF175B8),
          Color(0xFFFF8077),
        ],
      ),
    );

Container(
      decoration: boxDecoration,
      child: RawMaterialButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
      ),
    );

import 'package:polygon_clipper/polygon_clipper.dart';

ClipPolygon(
                  sides: 6,
                  borderRadius: 10.0, // Default 0.0 degrees
                  // rotate: 90.0, // Default 0.0 degrees
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: RadialGradient(
                        center: Alignment.centerLeft,
                        radius: 0.6,
                        colors: [
                          Color(0xFFF56CE0),
                          Color(0xFF8F81FE),
                          // Color(0xFF6FE4EC),
                        ],
                        stops: [
                          0.5,
                          // 0.2,
                          1,
                        ],
                      ),
                    ),
                    child: RawMaterialButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          PageRouteBuilder(
                            pageBuilder: (_, __, ___) => HomeScreen(),
                            transitionDuration: Duration(seconds: 0),
                          ),
                        );
                      },
                      constraints: BoxConstraints(
                        minWidth: 70,
                        minHeight: 55,
                      ),
                      child: Padding(
                        padding: EdgeInsets.only(bottom: 4),
                        child: Icon(
                          Feather.home,
                          color: kWhite,
                          size: 24,
                        ),
                      ),
                    ),
                  ),
                )