Após atualizar minha versão do Flutter para 3.29.3:

Flutter 3.29.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ea121f8859 (2 weeks ago) • 2025-04-11 19:10:07 +0000
Engine • revision cf56914b32
Tools • Dart 3.7.2 • DevTools 2.42.3

Não consigo contatar meu aplicativo SpringBoot. Uso um certificado que gerei com o OpenSSL:

openssl.exe req -newkey rsa:2048 -keyout PRIVATEKEY.key -out MYCSR.csr

openssl.exe req -new -x509 -nodes -sha256 -days 365 -key PRIVATEKEY.key -out host.cert

openssl.exe pkcs12 -export -in host.cert -inkey PRIVATEKEY.key -out keystore.p12 -name myApp

Com o Postman, meu requet : https://localhost/auth/authenticateon POSTrequest funciona bem e me dá meu access_token.

Agora, quando abro meu aplicativo Flutter no meu telefone físico, recebo este erro:

I/flutter ( 3796): ClientException with SocketException: Connection timed out (OS Error: Connection timed out, errno = 110), address = 192.168.1.40, port = 37950, uri=https://192.168.1.40/auth/authenticate
I/.example.xplore( 3796): Thread[2,tid=3802,WaitingInMainSignalCatcherLoop,Thread*=0xb40000732bd83c00,peer=0x15440320,"Signal Catcher"]: reacting to signal 3
I/.example.xplore( 3796): 
I/.example.xplore( 3796): Wrote stack traces to tombstoned
D/Looper  ( 3796): dumpMergedQueue
D/OplusLooperMsgDispatcher( 3796): dumpMsgWhenAnr

Meu endereço IP local no meu computador (ipconfig) é 192.168.1.40 .

Dentro do meu main.dart, eu substituí createHttpClient(o que eu acho que é SOMENTE para DEV, não em PROD):

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

Minha POSTsolicitação no meu aplicativo Flutter se parece com isso:

var response = await http.post(Uri.parse(login),
          headers: {"Content-Type": "application/json"},
          body: jsonEncode(reqBody))

Se precisar de mais informações, deixo que me pergunte :)

Obrigado pela ajuda!

Curiosamente, se eu tiver que fazer uma lista de detalhes com esses widgets:

Row(
  mainAxisAlignment:
      MainAxisAlignment.spaceBetween,
  children: [
    Text('some label'),
    Text('some value'),
  ],
),
Row(
  mainAxisAlignment:
      MainAxisAlignment.spaceBetween,
  children: [
    Text('some label'),
    Text('some value'),
  ],
),

Cada vez que os envolvo dentro de um Wrapou Columnde uma maneira mais simples.

Eu nunca alcançaria o que esperava se usasse Wrap, assim:

Wrap(
  direction: Axis.vertical,
  spacing: 8.0,
  children: [
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
),

Saída inesperada:

O problema é que o conteúdo é colocado no lado esquerdo. Mesmo eu envolvendo o Wrapwidget com oSizedBox(width: double.infinity, child: ...)

Eu só consegui o que queria (ou seja, já que estou usando Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [...],)aqui) com esta abordagem:

Uso de Column()widget em vez de Wrap()widget

Column(
  spacing: 8.0,
  children: [
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
),

Resultado esperado:

Observe que o SizedBox(width: double.infinity, child: Column(...))é redundante para este caso, a menos que haja um caso de uso que sugira isso.

Alguém poderia explicar com mais detalhes para entender por que isso está acontecendo? Entender melhor isso pode evitar a implementação de configurações erradas se tendermos a usar esse tipo de resultado de layout.

PS O comportamento permanece o mesmo se executado no DartPad

Aqui está o exemplo mínimo e reproduzível :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          spacing: 8.0,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('some label'), Text('some value')],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('some label'), Text('some value')],
            ),
          ],
        ),
      ),
    );
  }
}

Criei um widget. Este é um cartão. O cartão inteiro está organizado em uma coluna. Neste cartão, dois ícones (Excluir e Verificar) devem ser colocados em uma linha. Em seguida, uma SizedBox deve atuar como uma linha de separação (também tentei o Divisor, mas o resultado foi o mesmo). Após essa linha de separação, outra caixa de tamanho deve aparecer, contendo o conteúdo futuro. Agora, há o problema de que a linha de separação ou a caixa de tamanho não são exibidas e não está claro para mim onde está o erro. Aqui está o widget:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class TischCredentials extends ConsumerStatefulWidget {
  const TischCredentials({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _TischCredentialsState();
  }
}

class _TischCredentialsState extends ConsumerState<TischCredentials> {
  @override
  Widget build(BuildContext context) {
    //final tischIndex = ref.watch(tischProvider.notifier).state;
    //tischIndexErhoehen(tischIndex);
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              //Text("Tisch " + tischIndex.toString()),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(onPressed: () {}, icon: Icon(Icons.check)),
            ],
          ),
          SizedBox(
            height: 10,
            child: Center(
              child: Container(
                margin: EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
                height: 5.0,
                color: Colors.red,
              ),
            ),
          ),
          SizedBox(
            height: 100,
            width: 200,
          ),
        ],
      ),
    );
  }
}

Obrigado pela ajuda.

Como posso alinhar à direita cada um DataCellna Flutter DataTable ?

Por exemplo, neste caso, como posso ter todos os números alinhados à direita?

Widget build(BuildContext context) {
  return DataTable(
    columns: const <DataColumn>[
      DataColumn(
        label: Expanded(child: Text('Name', style: TextStyle(fontStyle: FontStyle.italic))),
      ),
      DataColumn(
        label: Expanded(child: Text('Number', style: TextStyle(fontStyle: FontStyle.italic))),
      ),
    ],
    rows: const <DataRow>[
      DataRow(
        cells: <DataCell>[
          DataCell(Text('Sarah')),
          DataCell(Text('1')),
        ],
      ),
      DataRow(
        cells: <DataCell>[
          DataCell(Text('Janine')),
          DataCell(Text('100')),
        ],
      ),
      DataRow(
        cells: <DataCell>[
          DataCell(Text('William')),
          DataCell(Text('1000')),
        ],
      ),
    ],
  );
}

Desde já, obrigado!

Estou tentando criar um tema escuro com base em um tema claro existente usando lightTheme.copyWith(brightness: Brightness.dark). No entanto, o aplicativo parece ignorar o brilho do tema escuro.

Meu main.dart usa o seguinte código:

@override
Widget build(BuildContext context) {
  return MaterialApp(
      theme: Themes.lightTheme,
      darkTheme: Themes.darkTheme,
      themeMode: ThemeMode.dark,
      ...
  );
}

onde Themes.lightThemee Themes.darkThemesão definidos da seguinte forma:

class Themes {
  static ThemeData get lightTheme => ThemeData(
        colorSchemeSeed: Colors.green,
      );

  static ThemeData get darkTheme => lightTheme.copyWith(
        brightness: Brightness.dark,
      );
}

O depurador mostra que o tema escuro contém brightness: Brightness.dark.

Entretanto, tudo funciona bem quando defino o tema escuro da seguinte forma, sem copyWith:

class Themes {
  static ThemeData get lightTheme => ThemeData(
        colorSchemeSeed: Colors.green,
      );

  static ThemeData get darkTheme => ThemeData(
        colorSchemeSeed: Colors.green,
        brightness: Brightness.dark,
      );
}

Alguém poderia me apontar meu ponto cego de conhecimento sobre Dart/Flutter e explicar o que acontece?

Ambiente:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.3, on Microsoft Windows [Version 10.0.22631.5262], locale xx-XX)
[✓] Windows Version (11 Home 64-bit, 23H2, 2009)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.13.6)
[✓] Android Studio (version 2024.3)
[✓] VS Code (version 1.99.3)
[✓] Connected device (3 available)
[✓] Network resources

Estou usando um StatefulShellRoutewith StatefulShellBranches como no código abaixo.

Gostaria de conseguir o seguinte: quando estou dentro de uma rota, StatefulShellBranchquero navegar para a primeira rota/rota padrão para ela StatefulShellBranch. Por exemplo, quando navego para path5, de dentro, Widget5quero navegar para path4.

Meu caso de uso é que tenho um botão Voltar dentro de Widget5, e quando navego diretamente para path5(por exemplo, por meio de um link profundo), quero "ir" para a primeira rota padrão dentro de StatefulShellBranchquando o botão Voltar é pressionado.

Roteador

router = GoRouter(
    routes: StatefulShellRoute.indexedStack(
      parentNavigatorKey: parentNavigatorKey,
      branches: [
        StatefulShellBranch(
          navigatorKey: key1,
          routes: [
            GoRoute(
              path: path1,
              pageBuilder: (context, state) {
                return Widget1();
              },
              routes: <RouteBase>[
                GoRoute(
                  path: path2,
                  pageBuilder: (context, state) {
                    return Widget2();
                  },
                ),
                GoRoute(
                  path: path3,
                  pageBuilder: (context, state) {
                    return Widget3();
                  },
                ),
              ],
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: key2,
          routes: [
            GoRoute(
              path: path4,
              pageBuilder: (context, state) {
                return Widget4();
              },
            ),
            GoRoute(
              path: path5,
              pageBuilder: (context, state) {
                return Widget5();
              },
            ),
          ],
        ),
      ],
    ),
    GoRoute(
      parentNavigatorKey: parentNavigatorKey,
      path: path6,
      pageBuilder: (context, state) {
        return Widget6();
      },
    ));

Widget

// Inside Widget5
class BackButton extends StatelessWidget {
  ...
  onPressed() {
    if (router.canPop()) {
      router.pop();
    } else {
      // TODO: Navigate to default route of StatefulShellBranch
      final defaultRoute = router
          .routerDelegate
          .currentConfiguration.???();
    }
  }
  ...
}

No momento, tenho um problema e não sei como resolvê-lo. Basicamente, tenho vários cartões na tela, cada um representando sua própria "tabela". Gostaria de rotular cada um deles com seu próprio índice. Em outras palavras, cada tabela deve ter "Tabela" com um índice anexado como título. Por exemplo, "Tabela 1, Tabela 2" etc. Criei um arquivo separado para a aparência básica do widget de cartão:

credenciais_tisch.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class TischCredentials extends ConsumerStatefulWidget {
  const TischCredentials({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _TischCredentialsState();
  }
}

class _TischCredentialsState extends ConsumerState<TischCredentials> {
  @override
  Widget build(BuildContext context) {
    //final tischIndex = ref.watch(tischProvider.notifier).state;
    //tischIndexErhoehen(tischIndex);
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              //Text("Tisch " + tischIndex.toString()),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(onPressed: () {}, icon: Icon(Icons.check))
            ],
          ),
          SizedBox(
            height: 8,
          ),
          Container(
            height: 50,
            width: 50,
          ),
        ],
      ),
    );
  }
}

Eu queria implementar isso neste arquivo, mas não funcionou como eu esperava. Então, movi para a tela principal, com o mesmo resultado. Minha última tentativa é esta:

pedidos_tela_principal.dart

import 'package:fabene_bestellungen/widgets/tisch_credentials.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class BestellungenMainSreen extends ConsumerWidget {
  BestellungenMainSreen({super.key, required this.tischIndex});

  int tischIndex = 0;
  String tischIndexErhoehen(int i) {
    i = ++i;
    return i.toString();
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    String aktuellerIndex = tischIndexErhoehen(tischIndex);
    return Scaffold(
      appBar: AppBar(
        title: Text('Bestellungen'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text('Tisch ' + aktuellerIndex),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),*/
              Text('Tisch ' + tischIndexErhoehen(tischIndex)),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),*/
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: 100,
                height: 800,
                color: Colors.blue,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                //color: Colors.red,
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.red),
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Infelizmente, não sei dizer como resolver isso. O Riverpod seria uma opção? Ou seja, salvar o índice em um provedor, aumentá-lo e atribuí-lo aos widgets individuais? Ou resolver tudo por meio de um future? Ou criar uma lista e exibi-la nos cards?

Gostaria de ajuda com a implementação idiomática deste recurso de interface. Suponha que eu queira uma combinação de um IconButtone Text(por exemplo, um nome precedido por um asterisco). Gostaria de posicioná-lo em um Row(que, por sua vez, está em um contêiner, como Column). No entanto, quero garantir que os seguintes requisitos sejam atendidos (veja o esboço em anexo):

• O ícone está bem na frente do texto (ou seja, sem espaçamento extra entre eles)
• Quando o texto é curto o suficiente, esse par de widgets é centralizado na linha.
• Se o texto for muito longo, ele será recortado corretamente (por exemplo, com reticências) sem transbordar.

Até agora, não tive muito sucesso em fazer isso funcionar. Se eu colocar dois Spacerwidgets nas laterais, o texto resultante é recortado de forma muito agressiva. Se eu o envolvo em Expanded, recebo exceções flexíveis. Considerando que é aparentemente uma forma bastante popular de apresentar texto, qual é a maneira do Flutter de organizá-lo?

Estou trabalhando em um layout do Flutter onde tenho uma lista de modos de transporte (como caminhada, carro, ônibus, trem) e estou colocando um avatar de perfil no topo usando um Stackwidget Positioned.
Aqui, o avatar do perfil não está dentro da 1ª linha.
Esta é a IU de amostra.

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text("Walk"),
          Text("Car"),
          Text("Bus"),
          Text("Train"),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

Tudo funciona bem até que o texto fique muito longo , como neste caso.
Se o texto for muito longo, é assim que ele pinta a interface do usuário problemática.

Tentei ajustar manualmente o texto em "sizedbox" com uma largura fixa para evitar sobreposições.
Mas isso não funciona em todos os casos.

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Row(
            children: [
              Icon(Icons.directions_walk),
              SizedBox(width: 8),
              // Manually restrict text width to avoid overlap
              SizedBox(
                width: 80, // <-- hardcoded width
                child: Text("Walk Walk Walk"),
              ),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_car),
              SizedBox(width: 8),
              Text("Car"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_bus),
              SizedBox(width: 8),
              Text("Bus"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.train),
              SizedBox(width: 8),
              Text("Train"),
            ],
          ),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

Existe uma maneira melhor de organizar isso para que o Positionedwidget não interfira no layout do texto abaixo — sem codificar as larguras

Quero apagar a lacuna indicada pela seta na Imagem.

Atualmente estou usando o InkWell.

highlightColor: Colors.blue;

Se eu fizer o procedimento acima e pressionar e segurar, a cor azul aparece nos espaços. Então, estou me perguntando se a animação está causando o problema.

Mas não sei como resolver isso.

                  gridView.builder(
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 0.7, 
                      ),
                      itemCount:
                          items.length;
                      itemBuilder: (context, index) {
                        return InkWell(
                               onTap()=>game())
                            child:Card(child:Container(height:100),                            margin: EdgeInsets.zero,
);