颤动中带有红色边框的自定义红色按钮

Question

I wanted to create a button like the picture. I am a beginner in flutter so I don't know how to start. Let me add that I would like to add a red glow effect to the button.

Answer 1

You can use InkWell with custom style, here is an example

InkWell(
  onTap: (){
    //YOUR FUNCTION
  },
  radius: 16.0,
  child: Container(
    padding: const EdgeInsets.symmetric(
      horizontal: 16.0,
      vertical: 8.0,
    ),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.red, width: 2),
      borderRadius: BorderRadius.circular(12),
    ),
    child: Text('Text', style: TextStyle(color: Colors.red),),
  ),
),

this will give you the you the output:

Answer 2

Try below code

OutlinedButton(
      onPressed: () {
        print('button pressed');
        //write your onPressed function here
      },
      child: Text(
        'TEXT',
        style: TextStyle(
          fontSize: 40,
        ),
      ),
      style: OutlinedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
            20,
          ),
        ),
        primary: Colors.red,
        backgroundColor: Colors.red.shade100,
        fixedSize: Size(200, 100),
        side: BorderSide(
          width: 10.0,
          color: Colors.red,
        ),
      ),
    ),

Result screen->

Answer 3

This should be a little more flexible, allowing the customization of color, shadow, light vs. dark backgrounds plus, of course, text.

Also, this doesn't use containers. You can't make containers constant, so many of us try to avoid them now:

---

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: CustomButton(
          // Places a black or white backing behind the inside, translucent color.
          backgroundIsDark: true,
          // The color of everything.
          color: Colors.red,
          // The shadow *outside* the border.
          shadowSize: 2.0,
          text: 'Test',
        ),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  const CustomButton({
    Key? key,
    required this.backgroundIsDark,
    required this.shadowSize,
    required this.text,
    required this.color,
  }) : super(key: key);

  final double shadowSize;
  final String text;
  final Color color;
  final bool backgroundIsDark;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        // TODO Implement Me.
      },
      radius: 16.0,
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: backgroundIsDark ? Colors.black : Colors.white,
          borderRadius: BorderRadius.circular(8),
        ),
        child: DecoratedBox(
          decoration: BoxDecoration(
            border: Border.all(
              color: color,
              width: 4,
            ),
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: color.withOpacity(0.4),
                blurRadius: shadowSize,
                spreadRadius: shadowSize,
                offset: const Offset(0.0, 0.0),
              ),
            ],
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 16.0,
              vertical: 8.0,
            ),
            child: Text(
              text,
              style: TextStyle(color: color),
            ),
          ),
        ),
      ),
    );
  }
}