Flutter：如何在 Flutter 中的其他小部件之间创建漂亮的曲线椭圆形容器/分隔线

Question

How to create this beautiful curve shape divider in a flutter App.

Answer 1

Simply use this customDivider as your divider

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

Here is an example

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

OUTPUT:

Answer 2

There can be many ways to do this in flutter. This is one of the simplest approach.

---

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

it use Stack class

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

pseudo code

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