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

Question

我想创建一个像图片一样的按钮。我是 flutter 的初学者，所以我不知道如何开始。让我补充一下，我想为按钮添加红色发光效果。

Answer 1

您可以使用 InkWell 自定义样式，这是一个例子

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

这会给你输出：

Answer 2

试试下面的代码

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

结果屏幕->

Answer 3

这应该更灵活一些，允许自定义颜色、阴影、浅色与深色背景，当然还有文本。

此外，这不使用容器。你不能让容器保持不变，所以我们中的很多人现在都试图避免使用它们：

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

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

Custom red button with red border in flutter

flutter

dart

flutter-layout