skip to Main Content

The text container consists of the text coming from provider, so the text container width is dynamically changing according to the text, so I want it have a fixed width that is to cover entire width of the screen. plese help me to acheive it.
here is the code

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Recapio"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Display the current confidence score
            Text(
              "Confidence: $_confidence",
              style: const TextStyle(fontSize: 18),
            ),
            // Display the Transcription using Provider
            Expanded(
              child: Container(
                // margin: EdgeInsets.all(50),
                padding: const EdgeInsets.all(12.0),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: SingleChildScrollView(
                  child: Text(
                    _transcription,// this is the text container that should occupy width of the whole screen
                    style: const TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),
            // Start/Stop Recording Button
            ElevatedButton.icon (
              onPressed: _toggleListening,
              icon: Icon(_isListening ? Icons.mic : Icons.mic_off),
              
              label: Text(_isListening ? "Stop Listening" : "Start Listening"),
            )
          ],
        ),
      ),
    );
  }

I am new to flutter and I have tried to search for this in flutter docs and stack overflow there were few post mentioning about sizedbox.expand but after adding that in place of exapanded made the entie screen blank with error about rendering and the widgets didnt even rendered.

2

Answers


  1. - you can use MediaQuery.of(context).size.width that cover screen width.
            
    - example for better understand.
            
            Container(
                    width: MediaQuery.of(context).size.width,
                    child: Text('Responsive Container'),
                  ),
    
    Login or Signup to reply.
  2. Wrap your text widget in SizedBox and set width to

    SizedBox(
       width: MediaQuery.sizeOf(context).width;
       child: Text(…
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search