Skip to main content

Flutter - Buttons, Containers

button.png

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

 

textinput0.png

textinput.png

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