Flutter UI ширина Container

Question

У меня есть три виджета: Text, Container и Stack. Как сделать так чтобы ширина Containera была равна ширине Stacka, но когда Stack сжали меньше ширины Texta тогда Container должен остаться по ширине Texta?

Stack(
  children: [
    SingleChildScrollView( 
      scrollDirection: Axis.horizontal,
      child: 
        Container(
          child: Text("...")
        ),
      ),
   ], 
)

Answer 1

Самый простой вариант через Positioned:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: 0,
          right: 0,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Container(
              color: Colors.red,
              child: Text("START" + " Text Text Text " * 8 + "END"),
            ),
          ),
        ),
      ],
    );
  }
}

Ширина Container ограничена шириной SingleChildScrollView. SingleChildScrollView берет максимальные размеры вычисляя размеры своего child.

Вариант с ширина Containerа равна ширине Stack. Через LayoutBuilder мы узнаем размеры которые мы можем использовать в ConstrainedBox.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: 0,
          right: 0,
          child: LayoutBuilder(
            builder: (context, constraint) {
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: constraint.maxWidth),
                  child: Container(
                    color: Colors.red,
                    child: Text("START" + " Text Text Text " * 8 + "END"),
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

БЛОГ НА HUSL

Flutter UI ширина Container

Ответы (1 шт):