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?