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,
      ),
    ),
  ),
)

 

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),
        ),
      ),
    );