skip to Main Content
   Card(
      color: Get.isDarkMode ? const Color.fromARGB(255, 31, 31, 31) : Theme.of(context).colorScheme.surface,
      // color: Colors.white.withOpacity(.2),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: CircleAvatar(
                    radius: 38,
                    backgroundImage: CachedNetworkImageProvider(pr.picLink),
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(pr.name, style: Theme.of(context).textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w900)),
                      Text(pr.detail, style: Theme.of(context).textTheme.bodyMedium),
                    ],
                  ),
                ),
              ],
            ),
          ),

// HERE
          Flexible(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                pr.longDetail ?? "null",
                style: Theme.of(context).textTheme.bodyLarge,
                overflow: TextOverflow.clip, // Kelimeleri kesmeden taşma durumunda tamamen keser
                textAlign: TextAlign.justify,
                // softWrap: true,
              ),
            ),
          ),
        ],
      ),
    );

I created stateless MyCardWidget widget and use in Flexible widget in column widget in Scaffold body.

              Column(
                children: [
                  Flexible(
                    flex: 7,
                    child: Center(
                      child: ....
                    ),
                  ),
                  Flexible(
                    flex: 5,
                    child: MyCardWidget(),
                  ),
                ],
              ),

text on bottom line

Text is cut horizontally in flutter. I want to use maximum space from card, gives to for pr.longDetail text. This page is responsive, because of this every device changes card height and text lines is changes. I don’t want to use SingleChildScrollView.

2

Answers


  1. You can wrap the Text widget with an Expanded widget rather than a Flexible widget to make sure the text in your pr.longDetail field doesn’t get cut horizontally and fills up all of the available space within the Card. In order to allow the text to extend horizontally without being cut off, the Expanded widget will ensure that its child—in this case, the Text widget—fills the available space within the Column.

    Here’s how to change the MyCardWidget you have:

    Card(
      color: Get.isDarkMode ? const Color.fromARGB(255, 31, 31, 31) : Theme.of(context).colorScheme.surface,
      // color: Colors.white.withOpacity(.2),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: CircleAvatar(
                    radius: 38,
                    backgroundImage: CachedNetworkImageProvider(pr.picLink),
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(pr.name, style: Theme.of(context).textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w900)),
                      Text(hoca.detail, style: Theme.of(context).textTheme.bodyMedium),
                    ],
                  ),
                ),
              ],
            ),
          ),
    
          // HERE
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: double.infinity,
              child: Text(
                pr.longDetail ?? "null",
                style: Theme.of(context).textTheme.bodyLarge,
                overflow: TextOverflow.clip, // Kelimeleri kesmeden taşma durumunda tamamen keser
                textAlign: TextAlign.justify,
                // softWrap: true,
              ),
            ),
          ),
        ],
      ),
    );
    
    

    The text will now expand horizontally to fill the available space within the Card by replacing Expanded for Flexible, making sure it does not get cut off.

    Login or Signup to reply.
  2. The problem is because you define the exact layout portion in the parent layout (column with two flexible widgets) with a given flex.

    To fix this you need to:

    1. Give the Card widget’s column the mainAxisSize property and set to MainAxisSize.min to make the inner card layout follow its child size automatically (because the default value is MainAxisSize.max).
    2. In the parent layout, change Flexible that wraps the Center widget to Expanded, so your Center widget will be filled side-by-side with the Card widget.
    3. Remove the Flexible widget that wraps the MyCardWidget to let the MyCardWidget auto-resize by its content.

    And this is the modified code below that I marked the changes with comments:

    Card Widget

    Card(
      color: Get.isDarkMode ? const Color.fromARGB(255, 31, 31, 31) : Theme.of(context).colorScheme.surface,
      child: Column(
        mainAxisSize: MainAxisSize.min // <----- ADD THIS
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: CircleAvatar(
                    radius: 38,
                    backgroundImage: CachedNetworkImageProvider(pr.picLink),
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(pr.name, style: Theme.of(context).textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w900)),
                      Text(pr.detail, style: Theme.of(context).textTheme.bodyMedium),
                    ],
                  ),
                ),
              ],
            ),
          ),
    
          Flexible(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                pr.longDetail ?? "null",
                style: Theme.of(context).textTheme.bodyLarge,
                overflow: TextOverflow.clip,
                textAlign: TextAlign.justify,
                // softWrap: true,
              ),
            ),
          ),
        ],
      ),
    );
    

    Parent Layout

    Column(
      children: [
        Expanded( // <-----  CHANGE FLEXIBLE TO EXPANDED
          child: Center(
            child: ....
          ),
        ),
        MyCardWidget() // <----- REMOVE FLEXIBLE WIDGET
      ],
    ),
    

    Result

    And this is the result:

    demo

    The code below is the workaround that I modified from your code to demonstrate the resulting gif above (you can try it on DartPad):

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Column(
              children: [
                Expanded(
                  child: Center(child: Text('Haha')),
                ),
                MyCardWidget(),
              ],
            ),
          ),
          debugShowCheckedModeBanner: false,
        );
      }
    }
    
    class MyCardWidget extends StatelessWidget {
      const MyCardWidget({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Card(
          // color: Get.isDarkMode
          color: false
              ? const Color.fromARGB(255, 31, 31, 31)
              : Theme.of(context).colorScheme.surface,
          // color: Colors.white.withOpacity(.2),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8),
                      child: CircleAvatar(
                        radius: 38,
                        // backgroundImage: CachedNetworkImageProvider(pr.picLink),
                      ),
                    ),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('pr.name',
                              style: Theme.of(context)
                                  .textTheme
                                  .bodyLarge!
                                  .copyWith(fontWeight: FontWeight.w900)),
                          Text('pr.detail',
                              style: Theme.of(context).textTheme.bodyMedium),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
    
    // HERE
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'test ' * 300 ?? "null",
                    style: Theme.of(context).textTheme.bodyLarge,
                    overflow: TextOverflow
                        .clip, // Kelimeleri kesmeden taşma durumunda tamamen keser
                    textAlign: TextAlign.justify,
                    // softWrap: true,
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }
    

    Hopefully it can solve your problem 😉

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search