How to edit Text Style in List Flutter

user_15425619 0
Viewed 393

I have a List that is populated with the return data of various var's called by a Json API

This List also has a fixed Text element preceding the data

I want to have separate weight, size etc for the initial text and then the String being passed in

I have tried RichText and TextStyle but needed a text function, not a list for it to work correctly

Here is the List, which is then passed into a function which pushes it to ShowDialog via the dynamic message

For example, Line: to be FontWeight.w600 & $pln String to be FontWeight.w400

List data = [
    "Line: $pln", 
    "Departed from: $originname",
    "Destination: $destname",
    "Last seen: $recordedattime",
    ];

ShowDialog, where message is the list from previous function

title: Text(title),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text(message,
                style: TextStyle(
              fontSize: 18,
              color: Color(0xff2F2F2F),
              fontWeight: FontWeight.w500,
              ...

Update 2 -

Future<void> _showDialog(String title, String message) async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          backgroundColor: Color(0xff2AC6FF),
          shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10)),
          title: Text(title),
          content: Container(
        // Just set a height & a width so you don't receive the previous error
        width: 200,
        height: 200,
            child: ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index){
        final titleText = data[index].split(': ')[0];
        final subText = data[index].split(': ')[1];
        
        return RichText(
          text: TextSpan(
           children: <TextSpan>[
              TextSpan(text: titleText, style: TextStyle(fontWeight: FontWeight.w600) ),
              TextSpan(text: subText, style: TextStyle(fontWeight: FontWeight.w400) ),
             ]
           ),
        ); 
      }
    )
          ),
          actions: <Widget>[
            TextButton(
              child: Text('OK',
...
dart flutter
1 Answers

Place this where your ListBody is

    ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index){
        final textData = data[index].split(': ');
        final titleText = textData[0] + ": ";
        final subText = textData[1];
        
        return RichText(
          text: TextSpan(
           children: <TextSpan>[
              TextSpan(text: titleText, style: TextStyle(fontWeight: FontWeight.w600) ),
              TextSpan(text: subText, style: TextStyle(fontWeight: FontWeight.w400) ),
             ]
           ),
        ); 
      }
    );

As for your scroll view error

AlertDialog(
    title: Text(title),
    content: Container(
        // Just set a height & a width so you don't receive the previous error
        width: 200,
        height: 200,
        child: ListView.builder(
            ...
        )
    )
)
user_84246440
Related