Flutter样式管理插件styled的使用

Flutter样式管理插件styled的使用

特性

A declarative UI tool for flutter to simplify the creation of widgets, pass arguments in positional without order.

使用此库作为依赖项

添加依赖

运行以下命令：

$ flutter pub add styled

这将向你的包的pubspec.yaml文件添加如下行（并隐式运行flutter pub get）：

dependencies:
  styled: "^0.1.0"

或者，你可以通过编辑器支持的功能来获取依赖项。查阅你的编辑器文档以了解更多信息。

导入库

在Dart代码中，现在可以这样使用：

import 'package:styled/styled.dart';

使用

• 对于受支持的组件，添加后缀’d’到组件名称以使用简化版本。
• 命名参数先于位置参数。

例如：

return Scaffoldd(
    AppBard(
      Theme.of(context).colorScheme.inversePrimary,
      Textd(widget.title),
    ),
    Centerd(
      Columnd(
        MainAxisAlignment.center,
        Textd('counter: $_counter'),
        Textd("TextD", 26, 12.5, FontWeight.bold, Colors.red),
        Textd("TextD2", Textd(18.5, FontWeight.w300, Colors.orange)),
        Rowd(
          MainAxisAlignment.center,
          Containerd(50, 50, const Color.fromARGB(255, 255, 0, 0)),
          Containerd(50, 50, const Color.fromARGB(255, 231, 255, 10)),
          Containerd(50, 50, const Color.fromARGB(255, 15, 221, 15)),
        ),
        Rowd(
          MainAxisAlignment.center,
          Containerd(35, 35, Colors.red, BoxShape.circle, Borderd(3, Colors.redAccent)),
          Containerd(Colors.yellow, BoxShape.circle, 35, 35, Borderd(3, Colors.yellowAccent)),
          Containerd(35, 35, Borderd(3, Colors.greenAccent), Colors.green, BoxShape.circle),
        ),
      ),
    ),
    FloatingActionButtond(
        _incrementCounter,
        'Increment',
        const Icon(Icons.add),
    ),
  );

解释版：

return Scaffoldd(
    AppBard( // `AppBar` => 'appBar' of Scaffold
      Theme.of(context).colorScheme.inversePrimary, // `Color:0` => 'backgroundColor'
      Text(widget.title), // `Widget` => 'title'
      title: Textd("named arguments precede positional ones", 20,
          const Color.fromARGB(255, 33, 211, 71)), // override 'title' with named argument
      ),
    ),
    Centerd( // `Widget` => 'body' of Scaffold
      Columnd( // `Widget` => 'child' of Center
        MainAxisAlignment.center,
        Textd('counter: $_counter'), // `Widget` will be added into the children of Column|Row.
        // The inner Textd returns a `TextStyle`, when no text:String is specified.
        Textd("TextD2", Textd(18.5, FontWeight.w300, Colors.orange)),
        <Widget>[ // type of `List<Widget>` => 'children' of the Column
          Textd(
            "TextD", // `String` => text to display
            26,   // 1st of type `int|double` => 'fontSize'
            12.5, // 2nd of type `int|double` => 'letterSpacing'
            FontWeight.bold,
            FontStyle.italic,
            // 1st of type `Color` => 'color'
            Colors.red,
            // 2nd of type `Color` => 'backgroundColor'
            const Color.fromARGB(255, 55, 101, 228),
            // 3rd of type `Color` => 'decorationColor'
            const Color.fromARGB(255, 226, 223, 33),
            // use enum:TextMaxLines to set maxlines
            TextMaxLines.three,
            // override `backgroundColor` with named argument
            backgroundColor: Colors.greenAccent,
          ),
        ],
      ),
    ),
    FloatingActionButtond( // => 'floatingActionButton' of Scaffold
        _incrementCounter,     // `void Function()` => 'onPressed' 
        'Increment',           // `String` => 'tooltip'
        const Icon(Icons.add), // `Widget` => 'child'
    ),
  );

额外信息

• <code>Textd</code>: 返回一个Text小部件或TextStyle，如果未指定String类型的参数。
• 在提示文档中，例如，Color: 0:color, 1:backgroundColor, 2: decorationColor, 3:selectionColor 表示第一个Color类型的参数被视为’color’，第二个被视为’backgroundColor’，第三个被视为’decorationColor’，第四个被视为’selectionColor’。
• <code>Containerd</code> 混合装饰参数。

例如：

  Containerd(
    45, // width
    45, // height
    BoxDecorationd(
      Colors.blue,
      Borderd(Colors.black, 3),
      BoxShadowd(Colors.grey.withOpacity(0.5), 7, 5, const Offset(0, 3)),
      BorderRadius.circular(0.5),
      borderRadius: BorderRadius.circular(10.5), // named arg precedes positional one
    ),
  ),

使用装饰混合：

  Containerd(
    45, // width
    45, // height
    Colors.blue,
    Borderd(Colors.black, 3),
    BoxShadowd(Colors.grey.withOpacity(0.5), 7, 5, const Offset(0, 3)),
    BorderRadius.circular(0.5),
    borderRadius: BorderRadius.circular(10.5), // named arg precedes positional one
  ),

支持的小部件

<table><tbody><tr>
<td>
<ul>
<li> AboutDialogd
</li><li> AbsorbPointerd
</li><li> ActionChipd
</li><li> Actionsd
</li><li> AlertDialogAdaptived
</li><li> AlertDialogd
</li><li> Alignd
</li><li> AnimatedAlignd
</li><li> AnimatedBuilder
</li><li> AnimatedContainerd
</li><li> AnimatedCrossFaded
</li><li> AnimatedIcond
</li><li> AnimatedListd
</li><li> AnimatedOpacityd
</li><li> AnimatedPaddingd
</li><li> AnimatedPositionedd
</li><li> AnimatedSwitcherd
</li><li> AppBard (partial)
</li><li> AspectRatiod
</li><li> Autocomplete
</li><li> BackdropFilterd
</li><li> Badged
</li><li> Baselined
</li><li> BottomAppBard
</li><li> BottomNavigationBarItemd
</li><li> BottomNavigationBard
</li><li> Builderd
</li><li> CallbackShortcutsd
</li><li> Cardd
</li><li> Centerd
</li><li> CheckboxListTiled (partial)
</li><li> CheckedPopupMenuItemd
</li><li> Chipd
</li><li> ChoiceChipd
</li><li> CircleAvatard
</li><li> CircularProgressIndicatord
</li><li> ClipOvald
</li><li> ClipPathd
</li><li> ClipRRectd
</li><li> ClipRectd
</li><li> ColorFilteredd
</li><li> Columnd
</li><li> ConstrainedBoxd
</li><li> Containerd
</li><li> CustomMultiChildLayoutd
</li><li> CustomPaintd
</li><li> CustomScrollViewd
</li><li> CustomSingleChildLayoutd
</li><li> DataTabled (partial)
</li><li> DecoratedBoxTransitiond
</li><li> DecoratedSliverd
</li><li> DefaultTabControllerd
</li><li> DefaultTextStyled
</li><li> Dismissibled
</li><li> Dividerd
</li><li> DragTarget
</li><li> Draggable (partial)
</li><li> DraggableScrollableSheetd
</li><li> Drawerd
</li><li> ElevatedButtond
</li><li> ExcludeSemanticsd
</li><li> Expandedd
</li><li> ExpansionPanelListd
</li></ul>
</td><td>
<ul>
<li> ExpansionPaneld
</li><li> FilledButtonTonalIcond
</li><li> FilledButtond
</li><li> FilterChipd
</li><li> FittedBoxd
</li><li> Flexd
</li><li> Flexibled
</li><li> Flipd as Transform.flip
</li><li> FloatingActionButtonExtendedd
</li><li> FloatingActionButtond
</li><li> Flowd
</li><li> FocusableActionDetectord
</li><li> Focusd
</li><li> FormField
</li><li> Formd
</li><li> FractionalTranslationd
</li><li> FractionallySizedBoxd
</li><li> GridTiled
</li><li> GridViewBuilderd
</li><li> GridViewCountd
</li><li> GridViewCustomd
</li><li> GridViewExtentd
</li><li> GridViewd
</li><li> HeroModed
</li><li> Herod
</li><li> IconButtond
</li><li> IgnorePointerd
</li><li> ImageAssetd
</li><li> ImageFiled
</li><li> ImageMemoryd
</li><li> ImageNetworkd
</li><li> Imaged
</li><li> IndexedStackd
</li><li> InkResponsed
</li><li> InkWelld
</li><li> Inkd
</li><li> InputChipd
</li><li> InteractiveViewerd
</li><li> IntrinsicHeightd
</li><li> IntrinsicWidthd
</li><li> LimitedBoxd
</li><li> LinearProgressIndicatord
</li><li> ListBodyd
</li><li> ListTiled (partial)
</li><li> ListViewBuilderd
</li><li> ListViewCustomd
</li><li> ListViewSeparatedd
</li><li> ListViewd (partial)
</li><li> ListWheelScrollViewd
</li><li> MergeSemanticsd
</li><li> MouseRegiond
</li><li> NavigationBard
</li><li> NavigationDestinationd
</li><li> NavigationDrawerd
</li><li> NavigationRailDestinationd
</li><li> NavigationRaild
</li><li> NestedScrollViewd
</li><li> NotificationListenerd
</li><li> Offstaged
</li><li> Opacityd
</li><li> OutlinedButtonIcond
</li><li> OutlinedButtond
</li><li> OverflowBoxd
</li></ul>
</td><td>
<ul>
<li> Paddingd
</li><li> PageViewd (partial)
</li><li> PhysicalModeld
</li><li> Placeholderd
</li><li> PopScoped
</li><li> PopupMenuDividerd
</li><li> PopupMenuItemd
</li><li> Positionedd
</li><li> RadioListTiled
</li><li> Radiod
</li><li> RangeSliderd
</li><li> RawImaged
</li><li> RawKeyboardListenerd
</li><li> RawMagnifierd
</li><li> RawMaterialButtond
</li><li> RefreshIndicatord
</li><li> RepaintBoundaryd
</li><li> RichTextd
</li><li> Rotated as Transform.rotate
</li><li> RotatedBoxd
</li><li> Rowd
</li><li> SafeAread
</li><li> Scaffoldd (partial)
</li><li> Scaled as Transform.scale
</li><li> ScrollConfigurationd
</li><li> Scrollabled
</li><li> Scrollbard
</li><li> SegmentedButtond
</li><li> Semanticsd (partial)
</li><li> ShaderMaskd
</li><li> Shortcutsd
</li><li> SingleChildScrollViewd
</li><li> SizedBoxd
</li><li> SizedOverflowBoxd
</li><li> SliderAdaptived as Slider.adaptive
</li><li> Sliderd
</li><li> SliverAppBard (partial)
</li><li> SliverOffstaged
</li><li> SliverOverlapAbsorberd
</li><li> SliverOverlapInjectord
</li><li> SliverPaddingd
</li><li> SnackBard
</li><li> Spacerd
</li><li> Stackd
</li><li> SwitchListTiled
</li><li> Switchd
</li><li> TabBarViewd
</li><li> TabBard
</li><li> TabPageSelectord
</li><li> Tabd
</li><li> TableRowd
</li><li> Tabled
</li><li> TextButtonIcond
</li><li> TextButtond
</li><li> Textd
</li><li> TickerMode
</li><li> ToggleButtonsd
</li><li> ToolTipd
</li><li> Translated as Transform.translate
</li><li> UnconstrainedBoxd
</li><li> VerticalDividerd
</li><li> Visibilityd
</li><li> Wrapd
</li></ul>
</td>
</tr></tbody></table>

已知不支持的组件

<ul>
<li> ButtonStyle
</li><li> Cupertino widgets
</li><li> DropdownButton
</li><li> FutureBuilder
</li><li> GestureDetector
</li><li> ImageFilter.matrix
</li><li> LayoutBuilder
</li><li> LongPressDraggable
</li><li> PopupMenuButton
</li><li> Positioned.*
</li><li> ReorderableListView
</li><li> ReorderableListView.builder
</li><li> SelectableText
</li><li> SelectableText.rich
</li><li> StreamBuilder
</li><li> TableBorder
</li><li> TextField
</li><li> TextFormField
</li><li> TweenAnimationBuilder
</li><li> ValueListenableBuilder 
</li></ul>

更改日志

请参阅 Changelog 页面。

许可证

Styled 以MIT许可证分发。更多详情请参阅 LICENSE。

完整示例代码

import 'package:flutter/material.dart';
import 'package:styled/styled.dart';

import 'widgets/segment_button.dart';
import 'widgets/checkbox_example.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Styled Demo',
      darkTheme: ThemeData.dark(useMaterial3: true),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  int currentPageIndex = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  static List<Tab> myTabs = [
    Tabd('LEFT', const Icon(Icons.join_left)),
    Tabd('STRAIGHT', const Icon(Icons.straight)),
    Tabd('RIGHT', const Icon(Icons.join_right)),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: Scaffoldd(
        AppBard(
          Theme.of(context).colorScheme.inversePrimary, // backgroundColor
          Text(widget.title), // title
          title: Textd("named arguments precede positional ones", 20,
              const Color.fromARGB(255, 33, 211, 71)),
          TabBard(myTabs),
        ),
        TabBarViewd(
          Rowd(
            MainAxisAlignment.center,
            Centerd(
              Columnd(
                MainAxisAlignment.center,
                Textd(
                  'counter: $_counter',
                  backgroundColor: Colors.amberAccent,
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
                Textd("text TextStyle", Theme.of(context).textTheme.bodyLarge),
                Textd("Styled TextD",
                    Textd(18.5, FontWeight.w300, Colors.orange)),
                Textd("Styled TextD2", 18.5, backgroundColor: Colors.amber),
                Textd(
                  "TextD", // text
                  26, // 1st of type `int|double` which is 'fontSize'
                  12.5, // 2nd of type `int|double` which is 'letterSpacing'
                  FontWeight.bold,
                  FontStyle.italic,
                  // 1st of type `Color`, which is 'color'
                  Colors.red,
                  // 2nd of type `Color`, which is 'backgroundColor'
                  const Color.fromARGB(255, 55, 101, 228),
                  // 3rd of type `Color`, which is 'decorationColor'
                  const Color.fromARGB(255, 226, 223, 33),
                  // use enum:TextMaxLines to set maxlines
                  TextMaxLines.three,
                  // override `backgroundColor` with named argument
                  backgroundColor: Colors.greenAccent,
                ),
                Rowd(
                  MainAxisAlignment.center,
                  Containerd(35, 35, const Color.fromARGB(255, 255, 0, 0)),
                  Containerd(35, 35, const Color.fromARGB(255, 231, 255, 10)),
                  Containerd(35, 35, const Color.fromARGB(255, 15, 221, 15)),
                ),
                Rowd(
                  MainAxisAlignment.center,
                  Containerd(35, 35, Colors.red, BoxShape.circle,
                      Borderd(3, Colors.redAccent)),
                  Containerd(Colors.yellow, BoxShape.circle, 35, 35,
                      Borderd(3, Colors.yellowAccent)),
                  Containerd(35, 35, Borderd(3, Colors.greenAccent),
                      Colors.green, BoxShape.circle),
                ),
                Containerd(
                  Paddingd(
                    const EdgeInsets.all(5.5),
                    Textd('This is a fancy container!', Colors.blue),
                  ),
                  LinearGradientd(Colors.red, Colors.orange, Colors.yellow),
                  BorderRadius.circular(20.0),
                  BoxShadowd(
                    Colors.black.withOpacity(0.5),
                    10,
                    const Offset(0.0, 5.0),
                  ),
                ),
                Containerd(
                  45,
                  45,
                  Colors.blue,
                  Borderd(Colors.black, 3),
                  BorderRadius.circular(0.5),
                  BoxShadowd(
                    Colors.grey.withOpacity(0.5),
                    7,
                    5,
                    const Offset(0, 3),
                  ),
                  borderRadius:
                      BorderRadius.circular(10.5), // named arg precedes
                  // named decoration precedes
                  decoration: BoxDecorationd(
                    LinearGradientd(
                      Colors.red,
                      Colors.orange,
                      Colors.yellow,
                      Alignment.topLeft,
                      Alignment.bottomRight,
                    ),
                    BorderRadius.circular(20.0),
                    BoxShadowd(
                      Colors.black.withOpacity(0.5),
                      10,
                      const Offset(10.0, 10.0),
                    ),
                  ),
                ),
                RichTextd(
                  TextSpand(
                    'This\n',
                    Textd(25, Colors.red, FontWeight.bold),
                    TextSpand('is link\n',
                        Textd(20, Colors.blue, TextDecoration.underline)),
                    TextSpand(
                        'text.\n', Textd(Colors.yellow, FontStyle.italic)),
                    TextSpand('bold\n', Textd(Colors.purple, FontWeight.bold)),
                  ),
                ), // RichTextd
              ),
            ), // Centerd
            Columnd(
              MainAxisAlignment.center,
              Stackd(
                Containerd(80, 80, Colors.blue),
                Containerd(60, 60, Colors.yellow),
                Containerd(50, 50, Colors.red),
              ),
              Stackd(
                Alignment.center,
                Containerd(80, 80, Colors.blue, BoxShape.circle),
                Containerd(60, 60, Colors.yellow, BoxShape.circle),
                LimitedBoxd(
                    30, 30, Containerd(50, 50, Colors.red, BoxShape.circle)),
              ),
              Stackd(
                Containerd(50, 50, color: Colors.white),
                Containerd(
                  const EdgeInsets.all(5.0),
                  Alignment.bottomCenter,
                  LinearGradientd(
                    Alignment.topCenter,
                    Alignment.bottomCenter,
                    Colors.black.withAlpha(0),
                    Colors.black12,
                    Colors.black45,
                  ),
                  Textd('Foreground', Colors.white, 20),
                ),
              ),
              ElevatedButtond(
                Textd("Button", 16, Colors.blue), // `child`
                () {}, // `onPressed`
              ),
              // BackdropFilterd(
              //   ImageBlurd(5, 6), //ImageFilter.blur(sigmaX: 5, sigmaY: 6),
              ElevatedButtond(
                const Icon(Icons.ac_unit_rounded), // `icon`
                Textd("label", 16), // `label`
                () {}, // `onPressed`
              ),
              // ),
              Scaled(
                0.8,
                1.2,
                IconButtond(
                  26.5, // `iconSize`
                  8.5, // `splashRadius`
                  const Icon(Icons.point_of_sale_rounded),
                  "tooltip", // `tooltip`
                  () {}, // `onPressed`
                  Colors.green,
                  Colors.greenAccent,
                ),
              ),
            ), // Column
          ), // Rowd
          Columnd(
            // tab 2
            MainAxisAlignment.center,
            const Spacer(),
            const Text('Single choice'),
            const SingleChoice(),
            const SizedBox(height: 20),
            const Text('Multiple choice'),
            const MultipleChoice(),
            const Spacer(),
            Expandedd(const CheckboxExample()),
          ), // Column
          Columnd(
            // tab 3
            MainAxisAlignment.center,
            const Spacer(),
            const Text('Single choice'),
            const SingleChoice(),
            const SizedBox(height: 20),
            const Text('Multiple choice'),
            const MultipleChoice(),
            const Spacer(),
          ), // Column
        ),
        // NavigationBard(
        //   (int index) {
        //     setState(() {
        //       currentPageIndex = index;
        //     });
        //   },
        //   indicatorColor: Colors.amber[800],
        //   currentPageIndex,
        //   NavigationDestinationd(
        //     'Home',
        //     const Icon(Icons.home_outlined),
        //     const Icon(Icons.home),
        //   ),
        //   NavigationDestinationd(
        //     const Icon(Icons.business),
        //     'Business',
        //   ),
        //   NavigationDestinationd(
        //     const Icon(Icons.school_outlined),
        //     const Icon(Icons.school),
        //     'School',
        //   ),
        // ),
        FloatingActionButtond(
          _incrementCounter, // `void Function()` => 'onPressed'
          'Increment', // `String` => 'tooltip'
          const Icon(Icons.add), // `Widget` => 'child'
        ),
      ),
    );
  }
}