Flutter：如何在 Flutter 中的其他小部件之间创建漂亮的 Curve 椭圆形 Container / Divider

Question

如何在flutter App中创建这个漂亮的曲线形状分隔线

Answer 1

它使用堆栈 class

link url : https://api.flutter.dev/flutter/widgets/Stack-class.html

伪代码

Stack {
  Container(), // background
  Contanier(), // white Line
  Text() , // center Text
}

Answer 2

在 flutter 中可以有很多方法来做到这一点。这是最简单的方法之一。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: SO(),
      ),
    );
  }
}

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink.shade100,
      appBar: AppBar(),
      body: Center(
        child: CapsuleWidget(
          label: 'organizing data'.toUpperCase(),
          ribbonHeight: 8,
        ),
      ),
    );
  }
}

class CapsuleWidget extends StatelessWidget {
  final Color fillColor;
  final Color textColor;
  final String label;
  final double ribbonHeight;
  final double ribbonRadius;

  const CapsuleWidget({
    Key key,
    this.fillColor = Colors.white,
    this.textColor = Colors.black,
    @required this.label,
    @required this.ribbonHeight,
    this.ribbonRadius = 1000,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Container(
            height: ribbonHeight,
            color: fillColor,
          ),
        ),
        Container(
          decoration: BoxDecoration(color: fillColor, borderRadius: BorderRadius.circular(ribbonRadius)),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Text(
              label,
              style: TextStyle(color: textColor, fontWeight: FontWeight.w500),
            ),
          ),
        ),
        Expanded(
          child: Container(
            height: ribbonHeight,
            color: fillColor,
          ),
        ),
      ],
    );
  }
}

Answer 3

只需使用这个 customDivider 作为您的分隔线

customDivider(String title) {
    return Row(
      children: [
        Expanded(
          child: Container(
            color: Colors.white,
            height: 10,
          ),
        ),
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(13),
            color: Colors.white,
          ),
          child: Center(child: Text(title)),
        ),
        Expanded(
          child: Container(
            color: Colors.white,
            height: 10,
          ),
        ),
      ],
    );
  }

这是一个例子

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: 5,
        shrinkWrap: true,
        itemBuilder: (context, index) => listItem(index),
      ),
    );
  }

  customDivider(String title) {
    return Row(
      children: [
        Expanded(
          child: Container(
            color: Colors.white,
            height: 10,
          ),
        ),
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(13),
            color: Colors.white,
          ),
          child: Center(child: Text(title)),
        ),
        Expanded(
          child: Container(
            color: Colors.white,
            height: 10,
          ),
        ),
      ],
    );
  }

  listItem(int index) {
    return Column(
      children: [
        Container(
          height: 200,
          width: 200,
          margin: EdgeInsets.all(10),
          color: index.isEven ? Colors.orange : Colors.deepPurpleAccent,
        ),
        customDivider("your title"),
      ],
    );
  }
}

输出：

Flutter：如何在 Flutter 中的其他小部件之间创建漂亮的 Curve 椭圆形 Container / Divider

Flutter: How to create a beautiful Curve oval shape Container / Divider between other widgets in Flutter

flutter

flutter-layout

flutter-animation