Как добавить несколько текстовых значений на панель приложений Flutter

Question

Я новичок в flutter и хотел бы создать панель приложения с двумя разными текстовыми значениями, см. Ниже:

So far, I have written the following code:

    class HomePage extends StatelessWidget {
  final double toolbarOpacity = 2.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
      PreferredSize(
        preferredSize: Size(double.infinity, 114),
        child: AppBar(
          centerTitle: false,
          title: Text(
            'My App',
            style: TextStyle(
                color: titleTextColor,
                fontWeight: titleTextFontWeight,
                fontFamily: titleFontFamily,
                fontSize: titleFontSize),
          ),
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),
      ),
    );
  }
}

Which has given me the following results:

введите описание изображения здесь

Может ли кто-нибудь направить меня к материалу или помочь мне достичь желаемого результата?

Заранее спасибо.

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor:Colors.amber,
        appBar: PreferredSize(
            preferredSize: Size(double.infinity, 114),
            child: AppBar(
              backgroundColor: Color(0xfff7f7fb),
              flexibleSpace: Padding(
                  padding:EdgeInsets.all(10),
                  child:Column( 
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height:20),
                    Text("Monday 3rd August 2020",
                        style:
                            TextStyle(color: Color(0xff59595a), fontSize: 15)),
                    Expanded(
                        child: Container(
                            alignment:Alignment.centerLeft,
                            child: Text("My App",
                                style: TextStyle(
                                    color: Colors.black, fontSize: 25))))
                  ])
                  ),
            )),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Вы можете увидеть предварительный просмотр в реальном времени по адресу: введите описание ссылки здесь

введите описание изображения здесь

Answer 2

Вы пытались разместить виджет Column в качестве заголовка с двумя дочерними элементами, являющимися двумя текстовыми виджетами, подобными этому (я не могу сейчас протестировать код, но он должен быть примерно таким):

class HomePage extends StatelessWidget {
  final double toolbarOpacity = 2.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
      PreferredSize(
        preferredSize: Size(double.infinity, 114),
        child: AppBar(
          centerTitle: false,
          title: Column(
            children: <Widget>[
                Text(
                'My App',
                style: TextStyle(
                    color: titleTextColor,
                    fontWeight: titleTextFontWeight,
                    fontFamily: titleFontFamily,
                    fontSize: titleFontSize),
              ),
              Text("My second text"),
            ]
           )
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),
      ),
    );
  }
}