标签: flutter-layout

Dart 分析显示以下错误：

错误：未定义类“FirebaseUser”。（[quizmaker] lib\services\auth.dart:7 处的 undefined_class）

错误：名称“User”在库“package:firebase_auth/firebase_auth.dart”和“package:quizmaker/models/user.dart”中定义。（ambigious_import 位于 [quizmaker] lib\services\auth.dart:7）

错误：名称“User”在库“package:firebase_auth/firebase_auth.dart”和“package:quizmaker/models/user.dart”中定义。（ambigious_import 位于 [quizmaker] lib\services\auth.dart:8）

错误：“用户”不是函数。（非函数调用位于 [quizmaker] lib\services\auth.dart:8）

错误：名称“User”在库“package:firebase_auth/firebase_auth.dart”和“package:quizmaker/models/user.dart”中定义。（ambigious_import 位于 [quizmaker] lib\services\auth.dart:15）

代码如下：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:quizmaker/models/user.dart';

class AuthService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  User _userFromFirebaseUser(FirebaseUser user){
    return user != null ? User(uid: user.uid) : null;
  }

  Future signInEmailAndPassword(String email, password) async {
    try {
      UserCredential authResult = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      User? firebaseUser = authResult.user;
      return _userFromFirebaseUser(firebaseUser);
    } catch (e) {
      print(e.toString());
    }
  }
}

我是编码新手，不确定如何将文本放入实际图标下的 TextButton.icon 中。请问你能帮忙吗？这是代码：

        TextButton.icon(
          onPressed: () => {},
          icon: Icon(
            Icons.add,
            color: Colors.white,
            size: 50,
          ),
          label: Text(
              'Label',
              style: TextStyle(
                color: Colors.white,
              ),
          )),

我想为 flutter web 重用移动应用程序代码。我已经在所有屏幕的脚手架中使用 AppBar() 和主体小部件进行了编码。现在我为网页采用 400 宽度和中心，除了应用栏之外都很好。

        Scaffold(
        appBar: this.getAppBarWidget(),
        body: Center(
          child: Container(
            width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
            child: this.getBodyWidget(),
          ),
        ))

上面的代码适用于除网页中的应用栏之外的所有移动和网页屏幕。

如何更改应用栏的宽度以适合宽度 400 ？

如果我使用 Size.fromWidth(400) 会出现错误。

以下代码适用于移动设备和网络。

   Scaffold(
    body: Center(
  child: Container(
    width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
    child: Column(
      children: [
        this.getCustomAppbarWidget(),
        this.getBodyWidget(),
      ],
    ),
  ),
))

请建议我。

我有这段代码。

 Container(
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(18),
      ),
      child: Center(
        child: Text(
          'Monday',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
          ),
        ),
      ),
    );

这产生了这个

但我想要看起来像这样的东西。

Container我是颤振的新手，遇到了小部件大小的问题，它Row是Column孩子的​​。我的目标是使用动态数据渲染Column和小部件。Row代码如下。

Container(
 decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(35),
  color: Colors.orange.shade400,
 ),
 child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 25.0),
  child: Column(
   children: <Widget>[
    Text("PEAK/THURSDAY"),
    Text("\$24,355"),
    weeklyExpenseBuilder(), // Row with Text widgets
   ],
  ),
 ),
)

不固定容器的大小会使其占据所有屏幕空间，但固定其高度会导致RenderFlex overflow错误。有没有办法让Container小部件只占用与其子部件一样多的空间。我想要的设计看起来像这样

如何将 Stack 子项剪切到其大小范围内。

在此图像中，有 3 个网格项目using orange color，每个项目都使用InkWell悬停方法在堆栈上对齐。虽然hover:falseWidgetPop PoP对 UI 不可见。使用对齐属性它可以工作，但是正如您所看到的，右上 GridItem 的item:2 pop POp小部件在外部可见Stack<Griditem>，而我想让它在堆栈外部不可见。我已经测试过使用clipBehavior:每个Clip enums.

我想Pop POp在小部件位于外部时隐藏它Stack，是的，我需要这种弹出效果。

对于 Flutter web，我使用的是 Flutter V2.5.2

当前布局存在问题

重现问题的完整代码

import 'package:flutter/material.dart';
void main() => runApp(
      const MaterialApp(
        home: Appp(),
      ),
    );

class Appp extends StatelessWidget {
  const Appp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const BodyX();
  }
}

class BodyX …

我想让我的 ListTile 内容位于白色背景后面，就像ListTile.tileColor滑动一样。

我不认为这是一个问题，但我现在想知道是否有办法解决它。

我的 Dismissible 小部件，带有 ListTile：

\n//For testing porpuses, removed some styling.\n\nDismissible(\n  key: UniqueKey(),\n  background: Container(\n    decoration:\n        BoxDecoration(color: cinzaIcone.withOpacity(0.5), borderRadius: BorderRadius.circular(15)),\n  ),\n  child: ListTile(\n    //tileColor: cinza,\n    tileColor: Colors.grey,\n    dense: true,\n    minLeadingWidth: 10,\n    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),\n    contentPadding: const EdgeInsets.symmetric(horizontal: 10),\n    leading: SizedBox(\n      width: 1,\n      child: Align(\n        alignment: Alignment.centerLeft,\n        child: Icon(\n          Icons.circle,\n          color: Colors.orange,\n          size: 15,\n        ),\n      ),\n    ),\n    title: Text(\n      //servico.nome,\n      "CONTRAPISO - SOLEIRAS",\n      style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Colors.blue),\n    ),\n    subtitle: …

我有一个小部件：（HtmlWidget('<font size="200">Some Long Sentence Alright</font>')来自https://pub.dev/packages/flutter_widget_from_html_core的自定义小部件，但使用Text('Some Long Sentence Alright', style: TextStyle(fontSize: 200))有同样的问题）。

因为它又大又长，当显示在手机上时，它会换行为：

Some Long 
Sentence Alright

有两种缩小规模的方法：

1. 缩放变换

Transform.scale(
  child: myWidget,
  scale: 0.5,
)

这种方法的问题：

• 文本仍然被换行（可能是因为它已布局，然后按比例缩小）
• 有“幻像”边距（请参阅Flutter - Transform.scale 小部件的大小在其子级缩放时不会改变）

2. 装配盒

Container(
  child: FittedBox(child: myWidget),
  width: 300,
  height: 100,
)

这种方法只有一个问题：我不知道预期的width/height.

myWidget 基本上，我想要一个可以根据比例缩小的小部件（如Transform.scale），但不包装内容（如FittedBox）。

我怎么做？

我想在屏幕右侧显示“优先级”，但我无法使该列为全宽。MainAxisAlignment 无法扩展字段。

child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                            Icon(Icons.task_alt_sharp , size: 50.0),
                            SizedBox(width: 20.0),
                            Container(
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.blueAccent)
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children:[
                                  Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      //crossAxisAlignment: CrossAxisAlignment.center,
                                      children: [
                                        Text(task.tag,style: const TextStyle(fontSize: 20, color: Colors.blue)),
                                        Text(" Priority "),
                                        Text(" Priority "),
                                      ],
                                    ),
                                  SizedBox(height: 5.0),
                                  Text(task.omschrijving),
                                ]
                              ),
                            )
                          ]
                    ),

我正在开发一个需要选项卡的 Flutter 项目，但其中一个选项卡名称很大，名称显示不完整，如图所示，我该如何解决这个问题，我想要文本TabBar，multiline我是新手颤振，因此任何帮助将不胜感激。

当前选项卡情况

这是代码

TabBar(
  tabs: [
    Tab(
      text: "Clock",
      icon: Icon(Icons.access_time),
    ),
    Tab(
      text: "Alarm",
      icon: Icon(Icons.access_alarm),
    ),
    Tab(
      text: "Stopwatch",
      icon: Icon(Icons.av_timer),
    ),
    Tab(
      text: "Countdown Timer",
      icon: Icon(Icons.timer_rounded),
    )
  ],
),