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