Flutter의 텍스트 위젯 아래에 노란색 선이 있습니까?


123

내 첫 번째 flutter 앱에서 작업 중입니다. 기본 앱 화면에는이 문제가 없으며 모든 텍스트가 정상적으로 표시됩니다.

그러나 내가 개발중인이 새 화면에서는 모든 텍스트 위젯 아래에 이상한 노란색 선 / 이중 선이 있습니다.

왜 이런 일이 발생하는지에 대한 아이디어가 있습니까?

노란색 선


코드를 추가 할 수 있습니까?
aziza 2011

14
그 이유는이 페이지에 스캐 폴드가 없기 때문이라고 생각합니다.
aziza 2017

@aziza 나는 당신이 옳다고 생각합니다. 이 페이지에는 비계가 없습니다. 문제가 될 수 있다고 생각했지만 확인하지 않았습니다. 비계가 없을 때 왜 이런 일이 발생하는지에 대한 아이디어가 있습니까? 나는 그것이 필요하다는 것을 깨닫지 못했습니다. _body_ 매개 변수 만 사용할 것이지만 어쨌든 Scaffold를 사용해야합니까?
dasfima

2
각 페이지에는 Scaffold가 필요합니다. 작은 위젯을 별도의 클래스로 리팩토링하더라도 어딘가에 Scaffold 부모가 있어야합니다. 텍스트에 밑줄을 긋는 것이 이런 의미인지 또는 문제인지는 확실하지 않습니다. 어쨌든 스캐 폴드 내에 페이지를 구축해야 할 필요가 있습니다.
aziza 2017

3
당신이 원하는이 donot 경우 또는 Scaffold, 당신은 단지 서라운드 당신의 수 TextMaterial위젯
realpac

답변:


154

문제는 없는지 Scaffold여부입니다. Scaffold을위한 도우미 Material응용 프로그램 ( AppBar, Drawer물건, 그 종류). 하지만 Material.

당신이 놓친 것은 Theme부모로서의 인스턴스입니다 .

아는 것이 왜 중요합니까? 모달을 개발할 때 ( showDialog예 : 사용 ) 동일한 문제에 직면하게 되기 때문 입니다. 그러나 Scaffold는 불투명 한 전체 화면 위젯입니다! 그리고 당신은 분명히 당신의 모달에서 그것을 원하지 않습니다.

Theme 인스턴스를 도입하는 방법에는 여러 가지가 있습니다. 머티리얼 앱에서 이것은 일반적으로 Material위젯 을 인스턴스화함으로써 달성됩니다 . 그리고 그거 알아? Scaffold당신을 위해 하나를 만듭니다. 하지만 Dialog너무!


3
또한 영웅의 경우 '비행 중'동안 부모와 연결이 끊어 지므로 Material영웅의 자식 (양쪽)으로 (또는 모든 테마)를 추가 하면 전환에서 수정됩니다. 참조 github.com/flutter/flutter/issues/30647
aaronvargas

79

Material위젯을 루트 요소로 추가하십시오 .

@override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: new Container(

1
주변 text또는 widgetMaterial위젯이 저를 도왔다. 내 경우에는 머티리얼을 루트 요소로 추가해도 도움이되지 않았습니다
MMK

1
둘 다 사용 type: MaterialType.transparency하거나 사용하지 않고 작동 합니다.
sassman

28

Scaffold(일반적으로 더 좋음) 또는 간단한 Material위젯 과 같은 머티리얼 테마를 제공하는 다른 구성 요소를 사용할 수 있습니다 .

다음은 그 중 하나를 사용하는 예입니다.

var text = Scaffold(body: Text("Hi"),);
var text2 = Material(child: Text("Hi"),);

해결 방법으로 다음을 사용할 수 있습니다.

Text(
  'Your text',
  style: TextStyle(decoration: TextDecoration.none), // removes yellow line
)

16

텍스트 스타일에는 없음으로 설정할 수있는 장식 인수가 있습니다.

Text("My Text",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

또한 다른 사람들이 언급했듯이 Text 위젯이 Scaffold 또는 Material 위젯의 트리에 있으면 장식 텍스트 스타일이 필요하지 않습니다.



6

이 답변에 내가 만나는 또 다른 방법을 추가하십시오.

DefaultTextStyle 위젯을 루트 위젯으로 감 쌉니다 . 여기서 각 텍스트 위젯을 변경할 필요는 없습니다.

DefaultTextStyle(
    style: TextStyle(decoration: TextDecoration.none), 
    child : Your_RootWidget
)

누군가에게 도움이되기를 바랍니다.


2

main.dart 파일에 Material과 Scaffold 위젯을 추가해야합니다.

 MaterialApp(
  home: Scaffold(
    body: Text('Hello world'),
  ),
);

2

이에 대한 다른 해결책이 있습니다. 특히 main.dart 파일 아래에 여러 페이지를 래핑 하는 경우 다음과 같이 할 수 있습니다.

  child: MaterialApp(
    home: Material(child: Wrapper()),
  ),

이렇게하면 래퍼에서 참조 / 사용 된 모든 페이지에있는 텍스트 아래의 노란색 줄이 제거됩니다.


1

머티리얼 루트 위젯을 추가하기 만하면됩니다.

      @override
       Widget build(BuildContext context) {
      return Material(
         child: new Container(),
        );
       }

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.