如何创建DropdownButtonFormField(Flutter)的圆角 [英] How to create a rounded corner of DropdownButtonFormField (Flutter)

问题描述

如何在Flutter中创建DropdownButtonFormField的圆角.我创建了这个 DropdownButtonFormField .现在要使其圆角变圆.

How to create a rounded corner of DropdownButtonFormField in Flutter. I created this DropdownButtonFormField. Now want to make its corner rounded.

这是它的代码:

  child: DropdownButtonFormField<String>(
    isExpanded: true,
    items: subCategories(),
    decoration: InputDecoration(
      contentPadding:
          EdgeInsets.only(left: 40, right: 40, bottom: 15, top: 15),
      labelText: "Sub Category",
      floatingLabelBehavior: FloatingLabelBehavior.always,
    ),
  ),

推荐答案

您可以为此使用 PopupMenuButton :

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Color(0xfffad9c1),
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends HookWidget {
  final categories = List.generate(4, (index) => 'Category $index');

  @override
  Widget build(BuildContext context) {
    final _selected = useState(1);
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: PopupMenuButton(
            onSelected: (value) => _selected.value = value,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(8.0))),
            itemBuilder: (context) {
              return categories
                  .map(
                    (value) => PopupMenuItem(
                      value: value,
                      child: Text(value),
                    ),
                  )
                  .toList();
            },
            offset: Offset(1, 40),
            child: Container(
              padding: EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.brown),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Sub Category: ${categories[_selected.value]}'),
                  Icon(Icons.arrow_downward),
                ],
              ),
            )),
      ),
    );
  }
}

这篇关于如何创建DropdownButtonFormField(Flutter)的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！