flutter
Rounded input button with shadows
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
color: Colors.blue[500],
child: Center(
child: MyWidget(),
),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
TextField(
style: TextStyle(height: 1.6),
cursorColor: Colors.amber,
decoration: InputDecoration(
prefixIcon: Icon(Icons.today),
border: InputBorder.none,
hintText: 'Enter a search term',
),
).shadow(),
TextField(
style: TextStyle(height: 1.6),
cursorColor: Colors.amber,
decoration: InputDecoration(
prefixIcon: Icon(Icons.today),
border: InputBorder.none,
hintText: 'Enter a search term',
),
).shadow(),
FlatButton(
onPressed: null,
child: Text(
"Text Button",
style: TextStyle(color: Colors.white),
),
).buttonShadow()
],
),
);
}
}
extension ShadowMaker on Widget {
shadow() {
return Card(
margin: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 20.0,
),
elevation: 6,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
child: this,
),
);
}
buttonShadow() {
return Card(
color: Colors.redAccent,
margin: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 20.0,
),
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 18.0,
),
child: this,
),
);
}
}
Was this helpful?
Similar Posts