1
votes

Est-il possible de souligner du texte avec une certaine hauteur entre le texte et la ligne de soulignement?

aujourd'hui, j'essaie de créer l'interface utilisateur de l'application sticker.ly en un clin d'œil. Mais je suis resté en ajoutant un espace entre le soulignement et le texte. voici mon code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

et ici je veux ajouter un espace entre le underline et le Text('For You') . y a-t-il un moyen de le faire d'une bien meilleure façon?

flutter flutter-layout

0 commentaires

3 Réponses :

0
votes

Pouvez-vous essayer quelque chose comme ça:

Container(
padding: EdgeInsets.only(
  bottom: 3, // This can be the space you need betweeb text and underline
),
decoration: BoxDecoration(
  border: Border(bottom: BorderSide(
    color: Colors.black,
    width: 1.0, // This would be the width of the underline
  ))
),
child: Text(
  "For You",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,)
  ,),)

3 commentaires

pourquoi avez-vous copié votre réponse de StackOverflow? ... J'ai essayé que cela ne fonctionne pas pour moi

fournissez votre réponse unique pour développer la communauté de flutter, pas une réponse copiée

Je l'ai essayé personnellement et cela a fonctionné, je suis désolé si cela n'a pas fonctionné pour vous.

0
votes

après de nombreux essais, je suis capable de résoudre par problème. Voici mon code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
                Row(children: <Widget>[
                  Padding(padding: EdgeInsets.symmetric(horizontal: 1, vertical: 5),
                  child: Container(
                    height: 3,
                    width: 52,
                    color: Colors.black,
                  ),
                  ),
                ],),
              ],
            ),  
          ),
          //search bar layout
          Container(
            child: Column(children: <Widget>[

            ],),
          ),
        ],
      ),
    );
  }
}

0 commentaires

0
votes

Voici une façon simple de le faire:

Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.red,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

J'ai écrit un article sur le soulignement de texte avec quelques autres solutions mais c'est ma préférée.

0 commentaires