标签: flutter-layout

我正在尝试将系统状态栏的颜色更改为黑色.配置似乎被AppBar类覆盖.我可以通过分配主题来实现我想要的:ThemeData.dark()在创建Material App时,然后指定一个appBar attribute.但我不想要一个AppBar,并且这样做也会改变所有的字体颜色.

一种可能的解决方案是将ThemeData.bright()继承到新类中,然后添加仅更改系统状态栏的内容

setSystemUIOverlayStyle

然后我需要指定AppBar并让它以某种方式隐形？

https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:english_words/english_words.dart';
import 'layout_widgets.dart' as layout_widgets;

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);

  void _pushSaved() {
     Navigator.of(context).push(
       new MaterialPageRoute(
           builder: (context) {
             final tiles = _saved.map((pair) {
               return new ListTile(
                 title: new Text(pair.asPascalCase,style:_biggerFont)
               );
              }
             );
             final divided = ListTile.divideTiles( …

我一直在研究 SliverAppBar、CustomScrollView、NestedScrollView、SliverPersistentHeader 等。我找不到一种方法来构建类似 Instagram 用户个人资料屏幕的标题，其中只有标签栏被固定。屏幕的主体是一个 TabBarView，每个窗格都有一个可滚动的列表。

使用 SliverAppBar，可以很容易地在底部参数中添加 TabBar。但我想在 TabBar 上方有一个未知/可变高度的额外小部件。当页面滚动时，额外的小部件应该滚动到一边，然后 TabBar 是固定在屏幕顶部的。

我所能管理的只是标签栏之前的固定内容和固定标签栏。我无法让标题向上滚动并将 贴TabBar在AppBar.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("pabloaleko"),
        ),
        body: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: <Widget>[
            SliverToBoxAdapter(
              child: SafeArea(
                child: Text("an unknown\namount of content\n goes here in the header"),
              ),
            ),
            SliverToBoxAdapter(
              child: TabBar(
                tabs: [
                  Tab(child: Text('Days', style: TextStyle(color: Colors.black))), …

我在网格视图中添加了一个标题。标题正在滚动，但在触摸网格视图时。它没有滚动。我想滚动标题和网格视图。我用过SingleChildScrollView和Expanded。如何解决请帮帮我。

我的代码如下所示

Widget ItemGridview() {
    return Container(
        color: Colors.white,
    padding: EdgeInsets.all(10),
    child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            new Expanded(
            child: SingleChildScrollView(
            child: Column(
                children: <Widget>[
                new Text(
            'Items of products',
            style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
            textAlign: TextAlign.left,
        ),
                GridView.count(
            shrinkWrap: true,
            primary: true,
            padding: EdgeInsets.only(top:15.0),
            crossAxisCount: 3,
            childAspectRatio: 0.60, //1.0
            mainAxisSpacing: 0.2, //1.0
            crossAxisSpacing: 4.0, //1.0
            children: createCategoryList(),
            ),
                ],
            ),
            )
        )
        ]
    ),
    );
}

在我的代码中，产品项是标题。

List<Widget> createCategoryList() {

  List<Widget> …

我正在尝试使用底部的浮动操作按钮创建一个简单的待办事项应用程序，单击该按钮时会显示警报对话框以将项目添加到列表中。每次单击按钮时，键盘都会向上推操作按钮，导致错误溢出。有没有办法避免在键盘打开时向上推操作按钮？这是我拍摄的快照： 源代码下方的快照：

import 'package:flutter/material.dart';
import '../model/todo_item.dart';

class ToDoScreen extends StatefulWidget {
  @override
  _ToDoScreenState createState() => _ToDoScreenState();
}

class _ToDoScreenState extends State<ToDoScreen> {
  TextEditingController _textEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Column(
        children: <Widget>[ToDoItem("Going for a Walk", "12 January, 2019")],
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add Item',
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: _showFormDialog,
      ),
    );
  }

  void _showFormDialog() {
    var alert = AlertDialog(
      content: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _textEditingController,
              autofocus: true, …

在Flutter中创建带有长字符串的Text小部件时，将其文本直接放在Column中时会自动换行。但是，当它在Column-Row-Column内时，文本会溢出屏幕的一侧。

如何在Column-Row-Column内换行？造成这种差异的原因是什么？在我看来，上一列的任何子级都具有相同的宽度是合乎逻辑的吗？为什么宽度无界？

我尝试根据其他答案将文本放在Expanded，Flexible，Container和FittedBox中，但这会导致新的错误，我不理解。

例：

MaterialApp(
  title: 'Text overflow',
  home: Scaffold(
    appBar: AppBar(title: Text("MyApp"),),
    body: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
            Column(
              children: <Widget>[
                Text("Short text"),
                Text("Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long …

我试图像这样为我的应用程序构建一个 UI。但是选项卡的视图不可见。我在许多 flutter 应用程序中使用过标签，但 UI 必须完全像下面一样

• 以图片为背景的应用栏
• appbar 部分中用户图像的一半部分，其余部分位于其下方
• 这些下面的标签栏。. . .

我的代码在这里

class _MyHomePageState extends State<MyHomePage> with 
TickerProviderStateMixin{
double screenSize;
double screenRatio;
AppBar appBar;
List<Tab> tabList = List();
TabController _tabController;
@override
void initState() {
tabList.add(new Tab(text:'Overview',));
tabList.add(new Tab(text:'Workouts',));
_tabController = new TabController(vsync: this, length: 
tabList.length);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
screenSize = MediaQuery.of(context).size.width;
appBar = AppBar(
 backgroundColor: Colors.transparent,
 elevation: 0.0,
);
return Container(
 color: Colors.white,
 child: Stack(
   children: <Widget>[
     new …

我想知道是否有人知道/找到了一种以编程方式使 Flutters 的 DraggableScrollableSheet 展开/折叠的方法。我正在使用他们的 Dev 频道中的 Flutters 最新版本，这允许我将它包装在一个

NotificationListener<DraggableScrollableNotification>

然后我可以听到床单展开/折叠的程度。但是，我不清楚如何折叠展开的工作表，反之亦然。

似乎在小部件 src 文件中有一个

DraggableScrollableActuator

这暴露了一个静态的 .reset 但我不知道/或想出一种方法来实现它。

是否可以以编程方式解雇？不是通过滑动，而是通过让我们说按钮点击。唯一想到的是以一定的速度模仿手势事件，但这听起来非常错误。

[on web] 尝试将一些小部件放入这样的 a 中FittedBox：

 FittedBox(
   fit: BoxFit.scaleDown,
   child: AnimatedContainer(...)
 )

但屏幕和控制台仅显示此消息：

控制台中没有其他内容

下一步是什么？:D

我通过添加 Provider 作为状态管理来重构我的 Flutter 应用程序代码。

期望的行为：当主屏幕打开时，应用程序应检查用户的电子邮件是否已验证，如果未验证，则应显示对话框弹出窗口。

问题：当我通过构造函数为 EmailVerified 传递数据时它工作正常，但是如果我想使用 Provider，我无法在initState()生命周期中获取这些数据。

您能否为我推荐这种用例的正确方法？

import 'package:myapp/services/authentication.dart';
import 'package:myapp/screens/settings_screen.dart';
import 'package:flutter/material.dart';
import 'package:myapp/services/authentication.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();
  bool _isEmailVerified = false;

  @override
  void initState() {
    super.initState();
    _checkEmailVerification(); // <=== Method which should show Dialog box if email is not verified which is coming from "Auth" Provider
  }

  @override
  Widget build(BuildContext …