Как сделать так, чтобы макеты отображались на изображении ниже во флаттере? - PullRequest
Новая
       32

Как сделать так, чтобы макеты отображались на изображении ниже во флаттере?

0 голосов
/ 05 августа 2020

Как сделать этот круговой аватар в случайном положении? Это мой код. Я использую стек внутри контейнера. Также используйте круговой аватар внутри стека и расположенные виджеты. 

//main.dart
import 'package:application/start.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => Start(),
    },
  ));
}

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

class Start extends StatefulWidget {
  @override
  _StartState createState() => _StartState();
}

class _StartState extends State<Start> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        child: AppBar(
          backgroundColor: Colors.blue,
        ),
        preferredSize: Size.fromHeight(
          5,
        ),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                // color: Colors.purple,
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      child: CircleAvatar(
                        radius: 30,
                        backgroundColor: Colors.black,
                      ),
                      top: 10,
                      left: 50,
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.green,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Это работает для создания макета, как показано на изображении введите описание изображения здесь

1 Ответ

0 голосов
/ 05 августа 2020

Вы можете использовать Random from dart:math для генерации случайных чисел. Затем вы можете использовать виджет LayoutBuilder , чтобы узнать, сколько у вас места. Наконец, вы можете использовать виджет Positioned для позиционирования виджетов именно там, где вы хотите, в данном случае в ваших случайных координатах.

Обратите внимание, что я не знаю цель вашей случайности . Вы можете сделать это StatefulWidget и сохранить свои случайные числа между вызовами build, чтобы при изменении вашего состояния приложения ваши случайные аватары оставались на месте. А может и нет. Выбор за вами.

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

import 'dart:math';

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final random = Random();
  final avatarSize = 50.0;
    
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: LayoutBuilder(builder: (context, constraints) {
      return Stack(
        children:[
          new Positioned(
            left: avatarSize + (constraints.biggest.width - 2 * avatarSize ) / 100.0 * random.nextInt(100),
            top: avatarSize + (constraints.biggest.height - 2 * avatarSize ) / 100.0 * random.nextInt(100),
            child: new CircleAvatar(
              radius: avatarSize / 2,
              child: new Text('1'),
              backgroundColor: Colors.yellow,
            )
        ),
        new Positioned(
          left: avatarSize + (constraints.biggest.width - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          top: avatarSize + (constraints.biggest.height - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          child: new CircleAvatar(
            radius: avatarSize / 2,
            child: new Text('2'),
            backgroundColor: Colors.red,
          )
        ),
        new Positioned(
          left: avatarSize + (constraints.biggest.width - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          top: avatarSize + (constraints.biggest.height - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          child: new CircleAvatar(
            radius: avatarSize / 2,
            child: new Text('3'),
            backgroundColor: Colors.blue,
          )
        ),
      ]);
  }));
  }
}
...