i want to have borders on the left, right, and top, with a border radius applied to to top left and top right in flutter

huangapple go评论66阅读模式
英文:

i want to have borders on the left, right, and top, with a border radius applied to to top left and top right in flutter

问题

我想在Flutter中在左侧、右侧和顶部使用白色边框,并在左上角和右上角应用边框半径(如给定图像所示)i want to have borders on the left, right, and top, with a border radius applied to to top left and top right in flutter,但不想在底部应用边框(我尝试了各种方法但是...)

英文:

I want to have borders with white color on the left, right, and top, with a border radius applied to top left and top right(as the given image)i want to have borders on the left, right, and top, with a border radius applied to to top left and top right in flutter in flutter..! do not want to apply border on bottom(I tried with everything but..)

答案1

得分: 3

你是指像这样设置容器的所有边框,除了底部边框之外?

这里底部边框的宽度为零,底部角没有边框半径。

import 'package:flutter/material.dart';

class SomeWidget extends StatelessWidget {
  const SomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    const BorderSide borderSide = BorderSide(width: 4, color: Colors.white);
    const Radius radius = Radius.circular(20);
    return Center(
      child: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(
          color: Colors.black,
          border: Border(
            left: borderSide,
            right: borderSide,
            top: borderSide,
            bottom: BorderSide(width: 0, color: Colors.white),
          ),
          borderRadius: BorderRadius.only(topLeft: radius, topRight: radius),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.green,
      body: SomeWidget(),
    ),
  ));
}
英文:

Do you mean something like this to have all borders except the bottom one of a container?

Here the width for the bottom border is zero and there is no border radius for the bottom corners.

import 'package:flutter/material.dart';

class SomeWidget extends StatelessWidget {
  const SomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    const BorderSide borderSide = BorderSide(width: 4, color: Colors.white);
    const Radius radius = Radius.circular(20);
    return Center(
      child: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(
          color: Colors.black,
          border: Border(
            left: borderSide,
            right: borderSide,
            top: borderSide,
            bottom: BorderSide(width: 0, color: Colors.white),
          ),
          borderRadius: BorderRadius.only(topLeft: radius, topRight: radius),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.green,
      body: SomeWidget(),
    ),
  ));
}

huangapple
  • 本文由 发表于 2023年7月14日 03:59:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76682857.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定