无法在Flutter小部件中设置文本大小的样式

时间:2019-07-02 18:18:14

标签: flutter dart flutter-layout

我正在尝试设置我在地址中键入的字段的样式,我想减小字体大小。我尝试通过“ Inputdecoration”中的各种“ textstyle”属性来更改fontsize,但是没有运气。我该如何实现?

这些黄线也突出了我的文字。这是错误吗?

请帮助我:/非常感谢〜

return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            GoogleMap(
              onMapCreated: (GoogleMapController controller) {
                mapController = controller;
              },
              initialCameraPosition: currentPosition,
              markers: marks,
            ),
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: PlacesAutocompleteField(
                  apiKey: 'AIzaSyDVxxxxxxxxxxxxxx',
                  hint: 'Search Places',
                  style: TextStyle(fontSize: 50.0),
                  inputDecoration: InputDecoration(
                    icon: Icon(Icons.search),
                    hintStyle: TextStyle(
                      fontSize: 50.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  onChanged: (value) async {
                    placeName = value;
                    print(placeName);
                    List<Placemark> placemark =
                        await Geolocator().placemarkFromAddress(placeName);
                    print(placemark[0].position);
                    Set<Marker> markers =
                        await getMarkers(placemark[0].position);
                    updateUI(placemark[0].position, markers);
                    mapController.animateCamera(
                        CameraUpdate.newCameraPosition(currentPosition));
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );

PlacesAutocompleteField的代码:

class PlacesAutocompleteField extends StatefulWidget {
  /// Creates a text field like widget.
  ///
  /// To remove the decoration entirely (including the extra padding introduced
  /// by the decoration to save space for the labels), set the [decoration] to
  /// null.
  const PlacesAutocompleteField({
    Key key,
    @required this.apiKey,
    this.style,
    this.controller,
    this.leading,
    this.hint = "Search",
    this.trailing,
    this.trailingOnTap,
    this.mode = Mode.fullscreen,
    this.offset,
    this.location,
    this.radius,
    this.language,
    this.sessionToken,
    this.types,
    this.components,
    this.strictbounds,
    this.onChanged,
    this.onError,
    this.inputDecoration = const InputDecoration(),
  }) : super(key: key);

  /// Controls the text being edited.
  ///
  /// If null, this widget will create its own [TextEditingController].
  final TextEditingController controller;

  /// Icon shown inside the field left to the text.
  final Icon leading;

  /// Icon shown inside the field right to the text.
  final Icon trailing;

  /// Callback when [trailing] is tapped on.
  final VoidCallback trailingOnTap;

  /// Text that is shown, when no input was done, yet.
  final String hint;

  final TextStyle style;

  /// Your Google Maps Places API Key.
  ///
  /// For this key the Places Web API needs to be activated. For further
  /// information on how to do this, see their official documentation below.
  ///
  /// See also:
  ///
  /// * <https://developers.google.com/places/web-service/autocomplete>
  final String apiKey;

  /// The decoration to show around the text field.
  ///
  /// By default, draws a horizontal line under the autocomplete field but can be
  /// configured to show an icon, label, hint text, and error text.
  ///
  /// Specify null to remove the decoration entirely (including the
  /// extra padding introduced by the decoration to save space for the labels).
  final InputDecoration inputDecoration;

  /// The position, in the input term, of the last character that the service
  /// uses to match predictions.
  ///
  /// For example, if the input is 'Google' and the
  /// offset is 3, the service will match on 'Goo'. The string determined by the
  /// offset is matched against the first word in the input term only. For
  /// example, if the input term is 'Google abc' and the offset is 3, the service
  /// will attempt to match against 'Goo abc'. If no offset is supplied, the
  /// service will use the whole term. The offset should generally be set to the
  /// position of the text caret.
  ///
  /// Source: https://developers.google.com/places/web-service/autocomplete
  final num offset;

  final Mode mode;

  final String language;

  final String sessionToken;

  final List<String> types;

  final List<Component> components;

  final Location location;

  final num radius;

  final bool strictbounds;

  /// Called when the text being edited changes.
  final ValueChanged<String> onChanged;

  /// Callback when autocomplete has error.
  final ValueChanged<PlacesAutocompleteResponse> onError;

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

class _LocationAutocompleteFieldState extends State<PlacesAutocompleteField> {
  TextEditingController _controller;
  TextEditingController get _effectiveController =>
      widget.controller ?? _controller;

  @override
  void initState() {
    super.initState();
    if (widget.controller == null) _controller = TextEditingController();
  }

  @override
  void didUpdateWidget(PlacesAutocompleteField oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.controller == null && oldWidget.controller != null)
      _controller = TextEditingController.fromValue(oldWidget.controller.value);
    else if (widget.controller != null && oldWidget.controller == null)
      _controller = null;
  }

  Future<Prediction> _showAutocomplete() async => PlacesAutocomplete.show(
        context: context,
        apiKey: widget.apiKey,
        offset: widget.offset,
        onError: widget.onError,
        mode: widget.mode,
        hint: widget.hint,
        language: widget.language,
        sessionToken: widget.sessionToken,
        components: widget.components,
        location: widget.location,
        radius: widget.radius,
        types: widget.types,
        strictbounds: widget.strictbounds,
      );

  void _handleTap() async {
    Prediction p = await _showAutocomplete();

    if (p == null) return;

    setState(() {
      _effectiveController.text = p.description;
      if (widget.onChanged != null) {
        widget.onChanged(p.description);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final TextEditingController controller = _effectiveController;

    var text = controller.text.isNotEmpty
        ? Text(
            controller.text,
            softWrap: true,
          )
        : Text(
            widget.hint ?? '',
            style: TextStyle(color: Colors.black38),
          );

    Widget child = Row(
      children: <Widget>[
        widget.leading ?? SizedBox(),
        SizedBox(
          width: 16.0,
        ),
        Expanded(
          child: text,
        ),
        widget.trailing != null
            ? GestureDetector(
                onTap: widget.trailingOnTap,
                child: widget.trailingOnTap != null
                    ? widget.trailing
                    : Icon(
                        widget.trailing.icon,
                        color: Colors.grey,
                      ),
              )
            : SizedBox()
      ],
    );

    if (widget.inputDecoration != null) {
      child = InputDecorator(
        decoration: widget.inputDecoration,
        child: child,
      );
    }

    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: _handleTap,
      child: child,
    );
  }
}

1 个答案:

答案 0 :(得分:2)

原因是您没有为Text提供任何具有实质性设计的小部件,因此有很多方法可以对其进行修复,例如您可以提供Material或基本的Scaffold 。推荐的方法是使用Scaffold,因为它也可以提供许多基本功能。


因此,您需要将Stack包裹在Scaffold

Scaffold(
  body: Stack(...)
)

更新(针对文本大小)

build()类的PlacesAutocompleteField方法中,将您的替换为以下

var text = controller.text.isNotEmpty
    ? Text(
  controller.text,
  softWrap: true,
  style: TextStyle(fontSize: 50),
)
    : Text(
  widget.hint ?? '',
  style: TextStyle(color: Colors.black38, fontSize: 50),
);