flutter_form_builder パッケージ内の FormBuilderRate の外観をフォーマットしようとしています ( pub.dev のパッケージへのリンク)。
具体的には、
- アイテム間の水平線のフォーマットを削除または変更する方法
- 接頭辞テキスト (例: 下のスクリーンショットの「Wwww...」) を評価星の下または中央に垂直に揃える方法
- 接頭辞 Text の 4 つのインスタンスすべての右側と評価星の左側を揃える方法、接頭辞 Text と一番左の星の間の隙間を狭く
padding: const EdgeInsets.onlyする方法
コードは次のとおりです。
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'[ 7 ] On a 1 - 5 star scale, with 5 being the best, how would you rate each of the following: ', // clipped " for this house"
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text:
' (optional)', // put 2 spaces instead of "\n (line break)
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
color: Colors.black54,
), // was 'misleading or inaccurate?',
),
],
),
),
SizedBox(
height: 6.0,
),
Padding(
padding: const EdgeInsets.only(left: 1.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
// labelText: 'FormBuilderRate',
prefix: Text(
'Wwwwwwwwww',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 67.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
//labelText: 'FormBuilderRate - kitchen:',
floatingLabelBehavior: FloatingLabelBehavior.auto,
prefix: Text(
'Xxxxxxx',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
//labelText: 'FormBuilderRate - kitchen:',
floatingLabelBehavior: FloatingLabelBehavior.auto,
prefix: Text(
'Yyyyyyyyyyyy',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 56.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
//labelText: 'FormBuilderRate - kitchen:',
floatingLabelBehavior: FloatingLabelBehavior.auto,
prefix: Text(
'Zzzzzzzz',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
部分的な回答を含む更新＃1：
以下の@Millerの回答でInputDecoration(border: InputBorder.none),は、行を削除しますが、接頭辞のテキストと星を揃える問題は解決しません。
それでも、部分的なソリューション コードは次のとおりです。
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: FormBuilderRate(
attribute: 'www',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'Row+Flexible Wwww',
style: TextStyle(
fontSize: 16,
),
textAlign: TextAlign.end,
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: FormBuilderRate(
attribute: 'Xxxx',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'Row+Flexible',
style: TextStyle(
fontSize: 16,
),
textAlign: TextAlign.end,
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: FormBuilderRate(
attribute: 'yyy',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'Yyyyyyyyyyyy',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 56.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'ZzzzzzzZ',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
これが Android エミュレーターでどのように表示されるかを次に示します (最初の 2 つの評価行は @Miller のアプローチを使用しており、#2 プレフィックスの垂直方向のテキスト配置の問題は修正されていません)。
更新 #2: 接頭辞テキストを評価星と垂直方向に揃える問題を解決しました:
@Joe Muller の回答 hereの一部に基づいて、実際のテキストを透明にし、影を追加してから、元のテキストよりも高い位置に影を配置しました。
コードのその部分は次のとおりです。
style: TextStyle(
fontSize: 16,
**color: Colors.transparent,
shadows: [
Shadow(
color: Colors.black54,
offset: Offset(0, -7))
],**
),
そして、ここに変更を加えたスクリーンショットがあります:
残っているのは、私の最初の質問からの #3 です: 接頭辞 Text の 4 つのインスタンスすべての右側と、評価星の左側を揃えて、接頭辞 Text と一番左の星の間のギャップを狭くする方法ハッキー パディングの使用: const EdgeInsets.only アプローチ)