如何在颤动中获得边框侧面颜色

Question

我正在设计一个简单的屏幕。我想实现这个

如何删除左上边框。我尝试使用边框仅显示一侧边框，但它显示错误无法更改另一个然后统一。我是否删除了应用栏然后堆叠了小部件。请告诉我我做错了什么。 我的代码是

import 'package:flutter/material.dart';

class SendScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> _scaffoldKey =
        new GlobalKey<ScaffoldState>();
    return Scaffold(
      drawer: Drawer(),
      key: _scaffoldKey,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          leading: IconButton(
              icon: Icon(Icons.access_alarm),
              onPressed: () {
                _scaffoldKey.currentState.openDrawer();
              }),
          actions: [
            Container(
              width: 50,
              decoration: BoxDecoration(
                color: const Color(0xff7c94b6),
                image: const DecorationImage(
                  image: NetworkImage(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                  fit: BoxFit.cover,
                ),
                border: Border.all(
                  color: Colors.black,
                  // width: 8,
                ),
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            SizedBox(
              width: 20,
            )
          ],
          shape: ContinuousRectangleBorder(
            borderRadius: BorderRadius.only(
              // bottomLeft: Radius.circular(30),
              bottomRight: Radius.circular(80),
            ),
          ),
          title: Text('Sliver AppBar'),
        ),
      ),
      body: Column(
        children: [
          Container(
            height: 80,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.red[500],
              ),
              borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(80),
              ),
            ),
            child: Row(
              children: [],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

这是a known "issue"。问题是一旦你指定了一个边界半径，你就不知道边界从哪里开始和在哪里结束。因此，flutter 不能只为某个边框分配边框颜色。

在我尝试过的所有情况下，唯一适合你的技巧是堆叠 2 个容器，背面的那个用来做边框。

这里是实现：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SendScreen(),
      ),
    );
  }
}

class SendScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
    return Scaffold(
      drawer: Drawer(),
      key: _scaffoldKey,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          leading: IconButton(
              icon: Icon(Icons.access_alarm),
              onPressed: () {
                _scaffoldKey.currentState.openDrawer();
              }),
          actions: [
            Container(
              width: 50,
              decoration: BoxDecoration(
                color: const Color(0xff7c94b6),
                image: const DecorationImage(
                  image: NetworkImage(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                  fit: BoxFit.cover,
                ),
                border: Border.all(
                  color: Colors.black,
                  // width: 8,
                ),
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            SizedBox(
              width: 20,
            )
          ],
          shape: ContinuousRectangleBorder(
            borderRadius: BorderRadius.only(
              // bottomLeft: Radius.circular(30),
              bottomRight: Radius.circular(80),
            ),
          ),
          title: Text('Sliver AppBar'),
        ),
      ),
      body: CustomRectangle(
        borderSize: 20,
        borderColor: Colors.grey[300],
        height: 80.0,
        borderRadius: 80.0,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

class CustomRectangle extends StatelessWidget {
  final Widget child;
  final double height;
  final double borderSize;
  final double borderRadius;
  final Color borderColor;

  const CustomRectangle({
    Key key,
    @required this.height,
    @required this.borderSize,
    @required this.borderRadius,
    @required this.child,
    @required this.borderColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
          child: Container(
            height: height + borderSize,
            decoration: BoxDecoration(
              color: borderColor,
            ),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
          child: Container(
            height: height,
            child: child,
          ),
        ),
      ],
    );
  }
}

看看CustomRectangle，这是我的自定义小部件，可以解决您的问题。您可以从那里扩展。