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.

CodePudding user response：

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->

CodePudding user response：

Making a button exactly as you show it is a bit specific, you would need to check documentation about styles, but here is a procedure to make very similar ones, you would just need to change some color styles to your liking:

FlatButton and RaisedButton are deprecated.

So, you can use shape which placed in the style property, for TextButton and ElevatedButton.

There are some changes since Flutter 2.0:

style: the property type has changed to ButtonStyle shape: the property type has changed to MaterialStateProperty<T> 2. Rounded Button

Inside the style property exists the shape property:

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

Square Button

For a square button you can use ElevatedButton or otherwise add:

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
      side: BorderSide(color: Colors.red)
    )
  )
)

Check this question (original source) to more details:

CodePudding user response：

This is "glow" effect:

for install this package add package to your pubspec.yaml file:

dependencies:
  flutter_glow: ^0.2.0

run flutter pub get to download package. also, import the package in your file:

import 'package:flutter_glow/flutter_glow.dart';

CodePudding user response：

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