Flutter Row виджет

Виджет Flutter Row используется для горизонтального отображения дочерних виджетов. Виджет Row не прокручивается.

Если вы хотите отобразить три подряд текстовых виджета в строке, вы можете создать виджет Row, как показано ниже:

return Row(
  children: <Widget>[
    Expanded(
      child: Text('Первая ячейка', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Вторая ячейка', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain,
        child: const FlutterLogo(),
      ),
    ),
  ],
);

После объявления виджета Row — строим три подряд ячейки. Оборачиваем все их в children: <Widget>. В первых двух ячейках указываем текст, виджет Text. Виджет FittedBox масштабирует и позиционирует дочерний объект внутри себя, в данном случае логотип.

Приведем полный код файла main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Row Flutter пример'),
          backgroundColor: Colors.green[600],
        ),
        body: App(),
      ),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Text('Первая ячейка', textAlign: TextAlign.center),
        ),
        Expanded(
          child: Text('Вторая ячейка', textAlign: TextAlign.center),
        ),
        Expanded(
          child: FittedBox(
            fit: BoxFit.contain,
            child: const FlutterLogo(),
          ),
        ),
      ],
    );
  }
}

Результат данного кода:

Кстати, если вы хотите избавится от надписи DEBUG в левом верхнем углу, вам надо написать следующее:

debugShowCheckedModeBanner: false

А где именно указывается, расскажем в следующем уроке.

Свойства Flutter Row

CrossAxisAlignment

Данное свойство задает вид расположения дочерних элементов:

CrossAxisAlignment.center:

 return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[.....

CrossAxisAlignment.start:

и наконец CrossAxisAlignment.end:

Остальные свойства мы рассмотрим в статье, в которой будем разбирать Row и Column вместе.